Pengertian Box Model dalam CSS

Semua elemen HTML bisa dianggap sebagai kotak atau box.

Mulai dari elemen header, article, paragraf, image, footer, dan lainnya memiliki bentuk segi empat.

Sehingga untuk membuat desain halaman website dengan HTML mirip seperti bermain lego.

Dalam CSS, terdapat istilah “box model” yang harus dipahami saat membahas desain dan layout halaman web.

Box model merupakan lapisan kotak yang membungkus setiap elemen HTML yang terdiri dari margin area, border area, padding area, dan content area.

Content area bisa terdiri dari teks atau gambar yang selalu ada dalam setiap elemen.

Sedangkan margin, border, dan padding merupakan opsional yang keberadaannya tergantung pada layout desain halaman web yang dibuat oleh web developer.

Keterangan:

• Content area - Konten elemen, bisa berupa teks dan gambar
• Padding - Area kosong disekitar content
• Border - Garis tepi elemen disekitar padding dan content
• Margin - Area kosong di luar border

Selain ketiga properti di atas, box model juga terdiri dari properti width yang digunakan untuk menentukan lebar elemen.

Dan properti height yang digunakan untuk menentukan tinggi suatu elemen.

Contoh:

.box {
  width: 300px;
  border: 16px solid green;
  padding: 48px;
  margin: 20px;
}

Mengatur Lebar dan Tinggi Elemen HTML

Untuk mengatur lebar dan tinggi elemen secara tepat pada semua web browser, kamu perlu memahami cara kerja “box model”.

Dalam CSS, property width digunakan untuk menentukan lebar elemen, dan property height digunakan untuk menentukan tinggi elemen.

Perlu diingat! Secara default, property CSS width dan height hanya mengatur lebar dan tinggi bagian content area saja.

Sehingga untuk menghitung ukuran penuh suatu elemen, kamu harus menambahkannya dengan padding, border, dan margin.

Contoh:

Coba hitung berapa lebar penuh dari elemen box berikut?

.box {
  width: 300px;
  height: 200px;
  border: 16px solid #ff9800;
  padding: 48px;
  margin: 24px;
  background: #ffe0b2;
}

Sebelum menghitungnya, coba perhatikan lagi box di atas! faktor apa saja yang mempengaruhi lebar elemen box tersebut?

Box di atas memiliki lebar berikut:

• margin kiri 24px
• border kiri 16px
• padding kiri 48px
• lebar content 300px
• padding kanan 48px
• border kanan 16px
• margin kanan 24px

Sehingga cara menghitungnya 2 * 24px (margin kanan & kiri) + 2 * 16px (border kanan & kiri) + 2 * 48px (padding kanan & kiri) + 300px (lebar konten) = 476px

Jadi total lebar elemen box menjadi 476px.

Mengatur Box Model dengan Property CSS box-sizing

Seperti pada contoh di atas, keberadaan “box model” bisa mempengaruhi lebar dan tinggi suatu elemen.

Hal ini disebabkan karena web browser akan menerapkan property CSS box-sizing dengan nilai content-box secara default.

Sehingga lebar dan tinggi yang ditentukan CSS hanya berpengaruh pada content area saja.

Dalam membuat desain layout website, kadang hal tersebut akan menyebabkan kendala pada tata letak suatu elemen yang tidak sesuai keinginan.

Untuk mengatasi masalah ini, kamu bisa menggunakan nilai border-box pada properti CSS box-sizing.

Dengan menerapkan box-sizing: border-box ini, nilai margin, border, dan padding akan ikut disertakan untuk menentukan lebar dan tinggi seperti yang ditetapkan pada property width dan height.

Artinya, lebar atau tinggi dari content area akan menjadi berkurang dari yang ditetapkan pada width atau height.

Agar lebih mudah memahaminya, saya akan menggunakan contoh di atas dengan menerapkan metode “border box”

.box {
  width: 300px;
  height: 200px;
  border: 16px solid #ff9800;
  padding: 48px;
  margin: 24px;
  background: #ffe0b2;
  box-sizing: border-box;
}

Pada box di atas, lebar elemen tetap 300px dan tingginya juga tetap 200px.

Namun lebar dan tinggi content area akan menyusut.

Begini cara menghitung lebar content area saat ini, 300px (lebar elemen) - 2 * 24px (margin kanan & kiri) - 2 * 16px (border kanan & kiri) - 2 * 48px (padding kanan & kiri) = 124px

Jadi lebar content area box di atas menjadi 124px.