CSS Box Model

Photo by Nick Karvounis on Unsplash

Semua elemen HTML pada dasarnya bisa kita anggap sebagai sebuah box/kotak. dalam CSS, pengaturan dan pemahaman tentang “box model” sangat diperlukan dalam membangun sebuah design dan layout. tanpa memahami hal ini, kita akan kesulitan dalam membuat layout yang kompleks. misalnya kita akan membuat suatu halaman web yang terdiri dari 3 kolom, 4 kolom dan lain lain.

CSS Box model pada dasarnya adalah sebuah kotak yang melingkari elemen HTML yang terdiri dari sebuah margin, garis (border), padding dan ukuran sebenarnya dari elemen tersebut. perhatikan ilustrasi dibawah ini

Penjelasan

  • Content : area dimana kita menempatkan text dan gambar
  • Padding : area bagian dalam yang mengelilingi content
  • Border : garis yang melingkari content
  • Margin : jarak content yang kita buat dengan content lain, areanya berada di luar baris.

Link MangcodingLebar dan Tinggi Suatu Elemen

Pernahkan kita mengharapkan lebar dari 2 buah elemen sebesar 50%, namun kedua elemen itu tidak saling bersebelahan dan tidak sesuai dengan yang kita harapkan? atau contoh lain pernahkah kita mengharapkan sebuah artikel dengan 3 buah kolom, namun yg terjadi malah 2 kolom dan 1 kolom lagi kebawah?
kasus-kasus demikian sering kita jumpai jika kita tidak mengetahui penjelasan dibawah ini.

Catatan :

Ketika kita mengatur lebar dan tinggi suatu elemen, kita hanya mengatur ukuran area content dari gambar yang sudah kita lihat diatas. untuk menghitung lebar atau tinggi sebenarnya kita harus menambahkan padding, margin dan border yang sudah kita set pada elemen tersebut.

Perhatikan contoh dibawah ini

jika kita lihat, kedua elemen diatas diset dengan ukuran berbeda. namun pas di render ternyata memiliki ukuran yang sama. mengapa demikian? ternyata lebar dan tinggi suatu elemen dipengaruhi oleh border dan paddingnya. untuk kasus diatas maka yang terjadi adalah :
Width = 270px + 34px (padding kanan dan kiri) + 6px (border kanan dan kiri) + 0px (margin kanan dan kiri).

  • Lebar sebenarnya dari suatu elemen : Lebar content + padding kanan dan kiri + border kanan dan kiri + margin kanan dan kiri
  • Tinggi sebenarnya dari suatu elemen : Tinggi content + padding atas dan bawah + border atas dan bawah + margin kanan dan kiri
  • Untuk IE versi 8 dan dibawahnya, secara default dia bertipe border-box yang artinya Tinggi sebenarnya sudah termasuk padding dan border didalamnya. untuk mengatasi masalah ini, tambahkan pada bagian atas document HTML

Link MangcodingBox-sizing

Setelah kita memahami penjabaran diatas, untuk melengkapi pengetahuan kita dalam mempermudah pembuatan layout maka kita perlu mengetahui sintaks box-sizing pada CSS. box-sizing memiliki value (padding-box, content-box dan border-box). Pada umumnya, semua elemen HTML bertipe content-box yang perilakunya sudah kita jelaskan diatas. karena perilaku content-box, kadang kita kesulitan untuk membagi kolom terlebih lagi jika menggunakan persentase karena berapapun kita set maka akan di jumlahkan dengan padding, margin dan border pada elemen tersebut.

Box-sizing di perkenalkan pada CSS3 dan yang paling banyak digunakan saat ini adalah border-box. Mengapa border-box? border-box sifatnya berbanding terbalik dari content-box. Tipe ini mengambil jatah padding dan border dari lebar/tinggi yang kita berikan kepada elemen tersebut sehingga kita tidak usah khawatir lebar/tingginya bertambah. border-box mempermudah kita dalam pengaturan layout responsive. di beberapa framework kekinian, bootstrap misalnya melakukan reset untuk semua elemen html agar bernilai border-box dengan menggunakan sintaks dibawah ini :

*{
box-sizing:
border-box;
}

 

atau dengan cara yang lebih elegen :
box-sizing pada elemen mengikuti pengaturan dari elemen diatasnya (inheritance), elemen paling induk adalah html.

html{
box-sizing: border-box;
}
*, *:before, *:after{
box-sizing: inherit;
}

 

Untuk memahami lebih lanjut tentang border-box, perhatikan contoh dibawah ini. (silakan bandingkan dengan contoh sebelumnya)

Pembagian kolom dengan memanfaatkan teknik box-sizing:border-box

Jika box-sizing dirubah jadi content-box atau dihilangkan

contoh pembagian layout dengan memanfaatkan floating dan box-sizing

Demikian penjelasan singkat mengenai Box Model pada CSS, jika ada pertanyaan seputar materi ini silakan tanyakan di kolom komentar.

Keep Learning
Semangat ^_^