Iwan Setiawan

Web & graphic designer, illustrator

Love digital design, follow me @intraktives

CSS box model sering disinggung saat berbicara mengenai web layout. Pemahaman konsep tentang CSS box model sangat membantu dalam memahami bagaimana suatu web element ditempatkan pada posisi tertentu yang diatur dalam CSS positioning. Dengan demikian pemahaman tentang CSS box model dan CSS positioning menjadi keharusan bagi para web designer bila ingin merancang struktur halaman website. Pada artikel selanjutnya saya akan membahas CSS positioning , namun pada artikel ini saya akan membahas konsep box model untuk membantu memahami konsep CSS positioning di artikel selanjutnya.

 

Apa itu Box Model?

Esensinya konsep box model menganggap semua elemen HTML sebagai kotak (box), dimana elemen HTML tersebut di “dibungkus”. Adapun kotak (box) tersebut terdiri dari margin, border, padding, dan content itu sendiri. Untuk lebih jelasnya bisa dibantu ilustrasinya pada Gambar 1.

 

Gambar 1

 

  • content : kotak (box) berisi image atau teks
  • padding : space transparan yang membungkus content
  • border : stroke/garis mengitari padding/content
  • margin : space transparan yang membungkus elemen HTML, dalam hal ini kotak (box). Dengan margin kita bisa menggeser elemen HTML tersebut ke kanan, kiri, bawah dan  atas

 

Contoh Box Model

JS Bin

 

Pada contoh di atas bisa kita lihat bagaimana box model sesungguhmya.Pada contoh tersebut kita menggunakan block level element yakni <div>. Pada contoh tersebut kita bisa melihat penerapan margin, border, padding dan content pada elemen tersebut.

 

Box Model Berlaku untuk Semua Elemen HTML?

Betul box model berlaku untuk semua elemen HTML, baik untuk elemen HTML yang memiliki sifat block-level (display : block) maupun inline (display : inline).

Elemen HTML dibagi menjadi 2 kategori yang diatur dalam display property :

  • block-level element, diantaranya : <div>, <p>,<h1>,<ul>,<li>,<tr>,<td>
  • inline element, diantaranya : <i>,<em>,<cite>,<code>

 

Ciri Block Level Element

  • bila width tidak ditetapkan secara eksplisit maka elemen ini akan memiliki width yang sama dengan parentnya.Parent ini berupa containing block dimana elemen tersebut berada, namun bila elemen tersebut tidak berada di dalam parent berupa containing block maka yang menjadi parentnya adalah view port dari browser. Jadi bila tidak ditetapkan secara eksplisit width dari elemen tersebut maka widthnya akan mengikuti lebar view port dari browser.
  • bisa dikenakan height,margin,padding
  • secara default elemen baru akan mengambil posisi dibawah elemen sebelumnya dan seterusnya (menumpuk) dengan asumsi elemen tidak dikenakan float dan positioning. Untuk lebih jelas bisa dilihat ilustrasinya pada Gambar 2.

Gambar 2. Setiap block level element baru akan mengambil posisi di bawah elemen sebelumnya

 

Ciri Inline Elemen

  • mengalir mengikuti text content sebagaimana seperti pada Gambar 3
  • bisa dikenakan margin-left, margin-right dan padding
  • elemen yang baru tidak akan menumpuk di bawah elemen sebelumnya sebagaimana pada block level element
  • abai terhadap margin-top dan margin-bottom
  • abai terhadap width dan height property

 

Gambar 3. Inline element mengikuti text content

Catatan

  • Untuk mudah mengingatnya block level element adalah elemen struktural dari website (membangun struktur web), sedangkan inline element adalah text-based element (berhubungan dengan tampilan teks)
  • suatu elemen bisa kita ubah dari block element menjadi inline element begitu juga sebaliknya, menggunakan display : block atau display : inline
  • block level element bisa kita letakkan di dalam block level element lainnya (containing block), begitu juga inline element bisa kita letakkan di dalam block level element. Namun block level element dan inline element tidak bisa diletakkan di dalam sebuah inline element