Margin dan Padding

Margin dan padding merupakan suatu property CSS yang tidak asing buat sobat blogger yang senang dengan mengedit template, di postingan ringan ini saya mencoba mengenal margin dan padding dengan gaya bahasa saya sendiri dan tidak lebih untuk sebagai media catatan saya dan bukan bermaksud untuk menggurui., karena pada dasarnya saya juga sering lupa perbedaan margin dan padding ini :p. 

Untuk memudahkan sobat dalam mengenal margin dan padding ini saya akan berikan screenshootnya seperti di bawah ini :  

Masing-masing element saya definisikan nilainya sebagai berikut :

element 1 { margin:0px; padding:0px;}

element 2 { margin:0px 10px 10px 0px; padding:0px 10px 10px 0px}

element 3 ( margin:0px; padding:0px}

Sekarang masuk ke definisi margin dan padding  :

Margin : Digunakan untuk mengatur jarak border batas atas (top), kanan ( right ), bawah ( bottom ) dan kiri ( left ) antar elemen (E2) dengan element di luarnya (E1)  
Syntax  propertynya :
     margin-top : value;
     margin-right: value;
     margin-bottom: value;
     margin-left: value;

Bisa ditulis shorthand property (secara singkat) :
contoh: 

margin {10px 20px 10px 0px}

Padding :  Digunakan untuk mengatur jarak border batas atas (top), kanan ( right ), bawah ( bottom ) dan kiri ( left ) antar elemen (E2) dengan element di dalamnya (E3}

Syntax propertynya : 
     padding-top:value;
     padding-right: value;
     padding-bottom:value;
     padding-left:value;

Bisa di  tulis Shorthand Property (secara singkat) :
contoh: 
padding {10px 20px 10px 0px}

Pada hal ini kita hanya fokus pada element 2 (E2) saja dimana saya sudah berikan margin bottom E2 dengan garis merahnya, margin right E2 garis kuning, padding bottom E2 dengan garis hitamnya, dan padding right E2 garis ungu dan nilai-nilai yang saya berikan untuk element 2 akan memberikan tampilan seperti screenshoot di atas, beda lagi apabila kita memberikan nilai element 2 (E2)dengan 0px uintuk margin dan paddingnya, maka element tersebut akan berdempetan dengan element 1 (E1) karena margin E2 0px dan element 3 (E3) karena padding E2 0px.

Semoga pengertian margin dan paddng ini dapat membantu sobat untuk lebih dalam mengenal property css, dan saya harapkan postingan ringan ini bermanfaat buat sobat blogger and happy blogging.

Sumber :

1. Mengenal margin dan padding oleh Suhu jaloee 
2. Setting properties of container 
3. w3schools