Box Model
Apa itu CSS Box Model? Semua yang ditampilkan oleh CSS berbentuk sebuah kotak/box. Oleh karena itu, memahami cara kerja Model Kotak CSS (CSS Box Model) merupakan dasar dan inti dari CSS.
Pernahkah anda membuat sebuah konten yang sudah anda define width dan height nya misalkan 100px, namun dalam penerapan-nya konten akan keluar dari elemen dan lebarnya akan menjadi 142px bukan 100px. Mengapa demikian? Box Model adalah dasar inti dari CSS agar kita memahami cara kerjanya, bagaimana hal itu dipengaruhi oleh aspek CSS lainnya dan yang terpenting, bagaimana kita dapat mengaturnya akan membantu kita membuat CSS yang lebih dapat diprediksi.
Content dan Sizing Box Model
Box Model memiliki hasil yang berbeda berdasarkan nilai dari display-nya, dimensi yang diberikan, dan konten yang ada di dalamnya. Konten ini dapat berupa lebih banyak box model yang — dihasilkan oleh elemen turunan — atau juga berisi konten teks biasa. Apa pun isinya, konten ini akan mempengaruhi ukuran kotak secara default.
Kata kunci yang teman-teman bisa dapatkan di case untuk CSS seperti muatan dalam suatu box size ini adalah “Extrinsic sizing” atau “Intrinsic sizing”. Perhatikan bahwa ketika kotak menggunakan ukuran ekstrinsik, ada batasan berupa banyak konten yang dapat anda tambahkan sebelum melebihi batas kotak.
Box Model Area
Box Model terdiri dari beberapa area model kotak yang berbeda yang semuanya melakukan tujuan tertentu. Empat area utama dari Box Model: Content Box, Padding Box, Border Box dan Margin Box. Content Box isi yang ada di paling dalam biasa diukur dengan padding dari border box ke bagian dalam. Padding Box adalah bagian dalam border box yang tidak terlihat. Border Box adalah bagian box dimana berisi ukiran yang ingin kita pasang dalam sebuah box, misalkan garis bold, garis putus-putus atau bahkan garis ukiran Majapahit, semuanya ada di dalam border box. Dan yang terakhir Margin Box bagian paling luar yang tidak terlihat.
Detail Box Model Area
Kita mulai dengan Content Box, yang merupakan area tempat konten ditempatkan. Seperti yang kita telah pelajari sebelumnya, Content Box ini dapat mempengaruhi ukuran induknya. Jadi biasanya ini adalah area dengan ukuran yang paling bervariasi.
Padding Box mengelilingi Content Box dan merupakan ruang yang dibuat oleh properti padding. Karena padding ada di dalam kotak, latar belakang kotak akan terlihat di ruang yang dibuatnya.
Jika kotak kita memiliki aturan overflow yang diterapkan, seperti overflow: auto atau overflow: scroll, scrollbar akan menempati ruang ini juga.
Border Box mengelilingi Padding Box dan ruangnya ditempati oleh niali dari property border. Border Box adalah batas dari apa yang dapat anda lihat secara visual. Properti border digunakan untuk membingkai elemen secara visual.
Area terakhir, Margin Box, adalah ruang di sekitar Box Model kita, yang ditentukan oleh property margin pada Box Model kita. Properti seperti outline dan box-shadow menempati ruang ini juga karena mereka di berikan warna di atas, sehingga tidak mempengaruhi ukuran kotak kita. Kita bisa memiliki lebar 200px pada Box Model nya dan semua yang ada di dalam dan termasuk Border Box akan berukuran persis sama.
