Apa itu box model?

Istilah box model digunakan untuk menentukan ruang antar elemen saat membuat desain dan tata letak elemen website. Istilah ini muncul karena semua elemen HTML dianggap sebagai kotak.

Box model adalah sebuah kotak yang membungkus setiap elemen HTML. Kotak ini terdiri dari margin, border, padding, dan content.

  • Margin - area terluar yang kosong setelah border. Margin bersifat transparan.
  • Border - garis tepi yang membungkus padding dan konten.
  • Padding - area kosong di antara konten dan border. Padding bersifat transparan.
  • Content - tempat elemen HTML yang akan ditampilkan. Berisi value/nilai dari HTML seperti teks, gambar, video, ataupun suara.

Jika digambarkan, ilustrasi struktur box model di HTML seperti ini:


Lebar dan Tinggi Elemen

Untuk dapat mengatur lebar dan tinggi elemen dengan benar di semua browser, kita perlu mengetahui cara perhitungan ruang dari sebuah elemen box.

Perhatikan contoh mencari berikut:



Jika kita lihat pada kode CSS, kita telah menentukan ukuran margin adalah 20px, border adalah 15px, padding adalah 50px, width konten adalah 300px, dan heigth konten adalah 100px. 

Properti width dan heigth tersebut berfungsi untuk mengatur lebar dan tinggi dari konten dalam element <p>, bukan lebar dan tinggi dari seluruh element <p> itu sendiri.

Penjelasan hasil dari kode di atas:
  • Content - area content dari elemen <p> adalah teks paragraf di dalam kotak yang ukurannya telah kita atur yaitu lebarnya 300px dan tingginya 100px.
  • Padding - area di antara teks paragraf dengan area kotak hitam adalah padding dari elemen <p> yang telah kita atur jaraknya yaitu 50px.
  • Border - area warna hitam adalah border dari elemen <p> yang ketebalannya telah kita atur yaitu 15px.
  • Margin - area terluar yang berisi teks Contoh Box Model adalah margin yang jaraknya dari border telah kita atur yaitu 20px.

Dari informasi di atas, jika kita hitung total lebar box yang mengelilingi elemen <p> adalah:

Lebar box = lebar konten (width) + padding kiri (left padding) + padding kanan (right padding) + border kiri (left border) + border kanan (right border) + margin kiri (left margin) + margin kanan (right margin)

Lebar box = 300px + 50px + 50px + 15px + 15px + 20px + 20px = 470px

Sementara, total tinggi box adalah:

Tinggi box = tinggi konten (height) + padding atas (top padding) + padding bawah (bottom padding) + border atas (top border) + border bawah (bottom border) + margin atas (top margin) + margin bawah (bottom margin)

Tinggi box = 100px + 50px + 50px + 15px + 15px + 20px + 20px = 270px

Contoh lainnya:

Pada contoh ini, kita akan mencari lebar dari sebuah element. Misalnya kita mempunyai sebuah element <div> dengan lebar 600px. Lalu di dalamnya kita isi dengan empat <img> yang masing-masing memiliki lebar 150px, maka ke-empat gambar tersebut akan ditempatkan berderet dalam satu baris seperti ini.


Tetapi ketika salah satu (atau semua) dari element tersebut memiliki border atau padding (misalkan padding: 10px dan border: 2px solid black), maka ke-empat gambar tersebut menjadi seperti di bawah ini sekarang:

Mengapa begitu?

Sebab sekarang lebar dari satu buah element <img> pada contoh di atas bukan lagi 150px. Melainkan 100px ditambah lebar padding dan border di kiri dan kanan.

Jadi lebar element <img> sekarang adalah 150px + (2 x 10px) + (2 x 2px) atau sama dengan 174px.

Tentu empat buah element dengan lebar 174px tidak akan muat di dalam <div> dengan lebar 600px. Makanya pada ilustrasi di atas ada satu gambar yang harus ditempatkan di baris berikutnya.

Untuk mengatasi hal tersebut, ada properti CSS yang bisa membantu kita yaitu box-sizing.

Apa itu Box Sizing?

Secara default, semua element HTML memiliki properti box-sizing: content-box, sehingga pemberian properti width dan height hanya mempengaruhi lebar dan tinggi dari konten suatu element.

Dengan memberi properti box-sizing: border-box pada sebuah element, pemberian properti width dan height tidak lagi menentukan lebar dan tinggi dari konten, melainkan lebar dan tinggi dari element.

Jadi, ukuran element: ukuran konten + padding + border.

Kita ambil contoh kode tadi:

Hasilnya, sekarang setiap element <img> memiliki lebar 150px dengan border setebal 2px dan padding sebesar 10px atau 150px = (2 x 2px) + (2 x 10px) + 126px.

"Berarti gambar kucingnya jadi lebih kecil dong?"

Benar sekali. Saat kita memberi properti box-sizing: border-box pada sebuah element, ukuran dari konten di dalamnya akan menyesuaikan dengan tinggi dan lebar element.

Dalam kasus di atas, lebar element kan 150px. Besar padding dari kedua sisi kanan dan kiri adalah 2 x 10px atau 20px. Besar border dari kedua sisi kanan dan kiri adalah 2 x 2px atau 4px. Sekarang lebar dari konten adalah "sisa" lebarnya. Dengan kata lain 150px - 20px - 4px atau sama dengan 126px.

Selesai.

Sumber:
https://skilvul.com/courses/css-dasar/