Perbedaan Antara Margin, Border, Padding dan Content

Perbedaan Antara Margin, Border, Padding dan Content - Kali ini saya akan membahas Perbedaan Antara Margin, Border, Padding dan Content. Pada awalnya, saya masih bingung apa perbedaan antara Margin, Border, Padding dan Content, Sebenarnya itu adalah sebuah hal tidak begitu sulit untuk di pecahkan, asalkan kita mau mempelajarinya. Nah, maka dari itu mari kita ulas tentang Perbedaan Antara Margin, Border, Padding dan Content.

Coba perhatikan gambar dibawah ini

 

Sedikit Ulasan tentang gambar di atas :

 

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

2. Border = Sebuah perbatasan yang berada di sekitar padding dan content. Perbatasan ini di pengaruhi oleh warna latar belakang kotak (dapat diberi warna)

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

4. Content =  isi kotak, dimana teks dan gambar muncul

Dalam penulisan kode untuk menentukan bagian per bagian 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 halnya juga dengan padding bila di tulis bagian per bagian

Demikian Perbedaan Antara Margin, Border, Padding dan Content. 

Semoga bermanfaat :D