Perbedaan Antara Margin, Border, Padding, Dan Content

Awalnya saya masih bingung membedakan antara Margin, Border, Padding dan Content, Tapi alhamdulillahnya saya nemuin pengertiannya dan sedikit ulasannya di blog "kode-blogger". 

Nah, karena ini menurut saya akan cukup bermanfaat jadi saya ulas disini tentang apa itu Margin, Border, Padding, Dan Content.



Coba perhatikan gambar dibawah ini

Sedikait Ulasan tentang gambar di atas :

1. Margin = Menghapus sebuah daerah di sekitar perbatasan. Margin yang tidak memiliki warna latar belakang, dan benar-benar transparan.

2. Border = Sebuah perbatasan yang terletak di sekitar padding dan konten. perbatasan ini dipengaruhi oleh warna latar belakang kotak (dapat diberi warna)

3. Padding = Menghapus sebuah daerah di sekitar konten (terletak antara border dan konten). padding ini dipengaruhi oleh warna latar belakang kotak.

4. Content = Isi kotak, di mana teks dan gambar muncul


Dalam penulisan code untuk menentukan bagian per bagain terdiri dari dua cara yaitu:

1. margin: 2px 2px 5px 0px; urutannya –> Atas, kanan, bawah, kiri
2. margin-top: 2px; margin-right: 2px; margin-bottom: 5px; margin-left: 0px;
demikian juga halnya dengan padding bila di tulis bagian per bagain.

Semoga Bermanfaat