Box Sizing

Pengertian Box Sizing

Box sizing adalah properti CSS yang menentukan bagaimana lebar dan tinggi elemen dihitung, termasuk margin, padding, dan border.

Jenis-jenis Box Sizing

• Content-box: Lebar dan tinggi elemen hanya mencakup konten di dalamnya. Margin, padding, dan border ditambahkan di luar ukuran konten ini.
• Border-box: Lebar dan tinggi elemen mencakup konten, padding, dan border. Margin ditambahkan di luar ukuran ini.

Contoh CSS

Untuk menunjukkan cara mengontrol bagaimana padding dan border memengaruhi lebar dan tinggi total suatu elemen, gunakan CSS berikut:

.element {
  width: 100px; /* Lebar konten */
  padding: 10px; /* Tambahkan padding */
  border: 1px solid black; /* Tambahkan border */
  box-sizing: border-box; /* Tentukan jenis box sizing */
}

Pengaruh Box Sizing

Dengan content-box, lebar total elemen akan menjadi 100px + (2 x 10px padding) = 120px.

Dengan border-box, lebar total elemen akan menjadi 100px + (2 x 10px padding) + (2 x 1px border) = 122px.

Manfaat Menggunakan Box Sizing

• Menjaga konsistensi tata letak elemen
• Mempermudah pengelolaan dan desain tata letak web