Setiap kali kita membuat suatu tag html, css akan menganggap tag itu bagaikan sebuah kotak (box). Saat kita mendesain / mebuat layout, kotak ini yang nantinya akan ditata sesuai keinginan kita dengan css. Konsep ini sering disebut css box model. Lalu, apa saja isi kotak itu?

Gambar di atas merupakan penggambaran dari css box model. Dari gambar tersebut terlihat isi dari css box model ini adalah content, padding, border, dan margin.

Content merupakan isi dari tag html yang kita buat, biasanya berupa tulisan. Dia ada diurutan paling dalam dari yang lainnya. Misal :

<p>Lorem ipsum dolor sit amet,</p>

“Lorem ipsum dolor sit amet,” merupakan content dari tag <p> di atas.

Padding merupakan jarak dari content tag tersebut ke batas tepi dari tag tersebut, dan border adalah batas tepi tersebut.

Lalu, margin merupakan jarak dari batas tepi (border) dari tag itu ke luar / ke tag lain yang ada di sekitarnya.

Biar lebih jelas, langsung ke contoh aja ya :

Contoh

Untuk contoh ini, saya menggunakan dua tag html yaitu div dan juga paragraf. Tag div saya gunakan hanya untuk menggambarkan margin dari paragraf, karena agak sulit untuk melihat secara langsung margin itu. Tag paragrafnya itu berada di dalam tag div tadi.

<div id="themargin">
<p>Nullam orci magna, elementum sit amet malesuada eu, consectetur vel augue. Proin ut dui eu nibh dapibus porta. Nunc vel urna tellus, vitae consectetur turpis. Quisque dictum sodales gravida.</p>
</div>

Ingat, div yang ber-id themargin itu hanya untuk menggambarkan bagaimana margin itu terlihat. Jadi, di sini kita hanya fokus di tag paragraf saja.

Pertama, saya inisialisasikan css untuk div yang id-nya themargin.

#themargin{
      background: #D4D0C8;
      width: 300px;
      border: 1px solid white;
    }

Lalu, kita akan bermain-main dengan tag paragrafnya / <p> . Tapi sebelum itu tag paragrafnya dikasih background putih dulu biar beda dengan themargin-nya. Trus, saatnya mencoba-coba :D

1. Margin

Pendefinisian margin di css menggunakan properti margin, atau bisa juga memakai properti margin-top, margin-bottom, margin-left dan juga margin-right untuk yang spesifiknya. Tapi untuk contoh kali ini saya hanya memakai properti margin saja biar lebih simpel.

Value dari properti margin ini adalah nilai dari margin yang kita inginkan bisa dalam pixel (px) , persen (%), ataupun em (px,% dan em akan saya bahas lain kali :Peace: ).

Dengan properti margin ini, kita bisa mendefinisikan ke-4 margin (atas, bawah, kanan, kiri) sekaligus dari tag yang kita buat sebelumnya (dalam hal ini tag paragraf).

Mendefinisikan ke-4 margin sekaligus dengan nilai yang sama

Untuk melakukan hal ini kita cukup menaruh satu nilai saja pada properti marginnya, contoh :

  p{
      background: white;
      margin: 10px;
    }

Dari contoh tersebut, seluruh margin (atas,bawah,kanan, dan kiri) dari tag <p> akan bernilai sama yaitu 10 pixel.

yang berwarna abu-abu itu menggambarkan margin dari <p> .

Masing-masing nilai margin tidak sama

Kalau kondisinya seperti ini, maka value dari properti marginnya akan berisi empat nilai dengan urutan nilai pertama untuk margin atas, nilai kedua untuk margin kanan, nilai ketiga untuk margin bawah dan nilai keempat untuk margin kiri.

Contohnya seperti ini :

  p{
      background: white;
      margin: 10px 30px 15px 50px;
    }

dari contoh itu, margin atasnya 10 pixel, margin kanan 30 pixel, margin bawah 15 pixel dan margin kiri 50 pixel.

Margin atas = bawah dan Margin kiri = kanan

Caranya dengan memberi dua nilai pada properti marginnya, dengan urutan nilai pertama berisi besarnya margin atas dan bawah, nilai kedua berisi besarnya margin kiri dan kanan. Contoh :

  p{
      background: white;
      margin: 10px 30px;
    }

Dengan cara di atas, maka margin atas dan bawahnya akan bernilai 10 pixel, sedangkan margin kiri dan kanannya akan bernilai 30 pixel.

2. Border

Margin sudah, sekarang saya akan coba menambahkan border pada paragraf yang sudah bermargin tadi, sebelumnya marginnya saya jadikan 10 pixel semua dulu biar enak.

Mendefinisikan border bisa menggunakan properti border untuk secara umum, tapi kalau ingin lebih detail bisa memakai properti border-top, border-bottom, border-left dll. Saya akan pakai yang border saja biar lebih gampang. Untuk simpelnya value yang saya isikan di border ini ada tiga bagian, ini yang biasa saya pakai.

Value pertama mendefinisikan tebal dari bordernya, trus value kedua itu tipe bordernya apakah solid, dotted (titik) dll, dan value ketiga menyatakan warna dari border tersebut. Posisi ketiga value ini bisa dibalik-balik. Contoh cssnya gini :

 p{
      background: white;
      margin: 10px;
      border: 1px solid black;
 }

Dengan css seperti di atas, maka akan muncul border dengan tebal 1 pixel tipenya solid dan berwarna hitam.

keliatan bordernya khan?? itu lho yang berwarna hitam mengelilingi textnya.

3. Padding

Mendefinisikan padding di css memakai properti padding, cara mengisi valuenya sama dengan cara mengisi value margin yang sudah dijelaskan di atas. Jadi tidak akan saya jelaskan lagi biar gak kepanjangan. hehe :beer:

Contoh penggunaan padding :

 p{
      background: white;
      margin: 10px;
      border: 1px solid black;
      padding: 10px;
 }

Setelah di beri padding, akan terlihat adanya jarak antara konten paragraf dengan bordernya, dalam hal ini jarak tersebut sebesar 10 pixel.

4. Content

Yang bisa diatur dari content ini adalah width dan height nya, width itu lebarnya ke kanan dan height adalah tingginya ke bawah. Pada contoh kali ini, yang akan diatur adalah width-nya saja.

 p{
      background: white;
      margin: 10px;
      border: 1px solid black;
      padding: 10px;
      width: 200px;
 }

Karena width dari paragraf di set 200 pixel, jadinya kotak paragrafnya mengecil. O iya, jangan lupa width yang diatur di css ini hanya merupakan lebar dari kontennya belum termasuk padding dan border. Jadi total width-nya termasuk padding dan border adalah 200px + 20px (padding kanan dan kiri) + 2px (border kanan dan kiri) = 222 pixel.

Mungkin cuman segitu tentang css box model, dah kepanjangan artikelnya, hehe…

View Demo | Download Source Code