Perbedaan Antara Margin, Border, Padding, Dan Content

Awalnya saya masih bingung membedakan antara Margin, Border, Padding, Dan Content, Sebenarnya itu merupakan hal yang tidak begitu sukar untuk dipecahkan, asalkan kita mau mempelajarinya. Persoalan klasik namun masih banyak yang mendapat problem disesi ini. saya sendiri contohnya.. hehe..
Nah, maka dari itu, Mari kita ulas lagi 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.

Mungkin sekian saja dari saya, selamjutnya sobat pasti lebih tahu. hehee
Semoga bermanfaat.