Mengenal Property Margin Dan Padding Pada CSS

Erlangga Hidayatullah - Saya sekarang ingin melanjutkan artikel tentang CSS bagian Property, yaitu Margin Dan Padding, sudah tak asing lagi Margin dan Padding ini di mata Devolever CSS.

Margin

Margin yaitu jarak area di sekitar sebuah elemen (luar perbatasan). Margin tidak memiliki warna latar belakang, atau transparan. 
Bagian Atas , Bawah , Kiri, Kanan. Bisa di ubah Secara Indipenden Atau Bebas Menggunakan Properti Terpisah. 
Value Pada Margin Ada Empat :

Nilai	Keterangan
auto	Untuk Membuat Margin Seperti Default
length	Menentukan margin di px, pt, cm, dll Nilai default adalah 0px
%	Sama Fungsinya Seperti Px Pt Cm DLL.

Penulisan Pada Margin

Element { 
margin-top: 15px;
margin-bottom: 15px;
margin-right: 10px;
margin-left: 10px;
}

margin-top : Memberi Jarak 15px Bagian Atas
margin-bottom : Memberi Jarak 15px Bagian Bawah
margin-right : Memberi Jarak 10px Bagian Kanan
margin-left : Memberi Jarak 10px

Penulisan Margin Dengan Cara Singkat

Element {
margin:15px 10px 15px 10px;
}

Yang Di Beri Warna Merah Itu Mengatur Margin Bagian ATAS
Yang Di Beri Warna Biru Itu Mengatur Margin Bagian KIRI
Yang Di Beri Warna Ungu Itu Mengatur Margin Bagian BAWAH
Yang Di Beri Warna Pink Itu Mengatur Margin Bagian KANAN

Penulisan Margin Sangat Singkat

Element {
margin: 15px 10px;
}

Value 15px Itu Mengatur Margin Atas Dan Bawah
Value 10px Itu Mengatur Margin Kiri Dan Kanan

Jika Margin sudah mengerti, kita lanjut ke Padding

Padding

Padding berfungsi untuk mengatur jarak atau memperlebar kotak atau sebuah element. Contohnya seperti gambar di atas

Value	Description
length	Mendefinisikan padding tetap (dalam pixel, pt, em, dll)
%	Mendefinisikan padding di % dari elemen yang mengandung

Cara Penulisannya Padding Sama Seperti Margin

Element { 
padding-top: 15px;
padding-bottom: 15px;
padding-right: 10px;
padding-left: 10px;
}

padding-top : Mengatur Margin Bagian Atas
padding-bottom : Mengatur Margin Bagian Bawah
padding-right : Mengatur Margin Bagian Kanan
padding-left : Mengatur Margin Bagian Kiri

Untuk Penulisan Secara Singkatnya 

Element {
padding:15px 10px 15px 10px;
}Yang Di Beri Warna Merah Itu Mengatur Padding Bagian ATAS
Yang Di Beri Warna Biru Itu Mengatur Padding Bagian KIRI
Yang Di Beri Warna Ungu Itu Mengatur Padding Bagian BAWAH
Yang Di Beri Warna Pink Itu Mengatur Padding Bagian KANAN

Untuk Penulisan Lebih Singkat

Element {
padding: 10px 50px;
}

Yang Ber Value 10px Itu Mengatur Margin Atas Dan Bawah
Yang Ber Value 50px Itu Mengatur Margin Kiri Dan Kanan

Jika kalian sudah mengerti tentang Property Css Padding dan Margin, tunggu artikel selanjutnya di blog ini.
Sekian semoga artikel ini menambah wawasan anda, dan terima kasih
Salam Blogger Newbie ...