Perbedaan dari fungsi margin dengan padding

Seperti yang sering sekali kita melihat dari sekian banyak kode yang ada pada kode script CSS, sering kita menemukan kedua kode tersebut. Dan sedikit penjelasan dari fungsi margin dengan padding, bahwa kedua fungsi tersebut sebenarnya hampir sama walaupun keduanya berbeda, dan dibawah ini akan di jelaskan fungsi dari margin dan padding tersebut.

Dan fungsi dari margin dengan padding dapat saya simpulkan seperti gambar di atas

Margin

---

Margin adalah kode yang mengatur seleksi batas jarak luar, seperti misal memberi jarak antara header blog dengan batas atas, bawah, kanan dan kiri dari kontent yang ada pada struktur header di sekitarnya.

Contoh pengkodean dari margin tersebut seperti dibawah ini

body {
Margin-top : 10px ;
Margin-rigth : 5px;
Margin-bottom : 0px;
Margin-left : 5px;
}

yang menjadi patokan dari fungsi ini adalah dimulai dari atas, kanan, bawah dan kiri, atau bila berdasarkan talar kita adalah searah dengan jarum jam.
Dari keterangan dari pengkodean margin di atas, dapat di gabungkan menjadi

Margin : 10px 5px 0px 5px; /*atas 5, kanan 5, bawah 0, kiri 10*/
Apabila value seperti ini, dapat diringkas kembali menjadi seperti ini
Margin : 10px 5px 0px; /*atas 5, kanan 0, bawah 5, kiri 0*/

Seperti yang saya katakan diatas yang telah saya singgung mengenai Apabila value seperti ini, dapat diringkas kembali menjadi seperti ini, ini menandakah bahwa value kanan 5px mengisi kekosongan value yang berada dibagian kiri. Jadi yang dapat saya simpulkan adalah bila kita menggunakan metode seperti ini maka margin tidak lagi mengikuti dengan arah jarum jam melainkan dari atas kebagian bawa, dan dari kanan kebagian kiri

Padding

---

Seperti yang telah saya terangkan di atas bahwa fungsi margin dengan padding sebenarnya hampir sama walaupun keduanya berbeda, dan yang membuat berbeda dari fungsi padding ini yaitu fungsi padding mengatur seleksi batas jarak pada bagian dalam (lihat gambar)

Contoh pengkodean dari Padding tersebut seperti dibawah ini

body {Padding-top : 15px ;
Padding-rigth : 5px;
Padding-bottom : 15px;
Padding-left : 5px;
}

Dari keterangan pengkodean dari Padding di atas, dapat di gabungkan menjadi

Padding : 15px 5px 15px 5px
atau bila value seperti ini dapat di singkat kembali seperti ini
Padding : 15px 5px;

Silahkan di praktekkan kembali untuk mengetahui lebih jauh tentang fungsi dari kedua fungsi margin dan padding ini.