Box Sizing CSS

Box Sizing CSS

CSS box-sizing properti memungkinkan kami untuk termasuk padding (isian) dan border dalam lebar dan tinggi total elemen.

Jika tidak diset properti CSS box-sizing

Secara default, lebar dan tinggi elemen dihitung seperti ini:

  • width + padding + border = lebar aktual elemen
  • height + padding + border = tinggi aktual elemen

Artinya: ketika Anda mengatur lebar/tinggi elemen, elemen biasanya terlihat lebih besar daripada yang Anda tetapkan (karena border dan padding elemen telah ditambahkan ke lebar/tinggi yang disetkan elemen).

Gambar di bawah menunjukkan dua elemen <div> dengan lebar dan tinggi yang disebutkan sama:

Div ini lebih kecil
(lebar 300px, tinggi 100px).
Div ini lebih besar
(lebar juga 300px, tinggi 100px).

Dua elemen <div> di atas menampilkan ukuran yang berbeda di hasil akhir (karena div2 menentukan padding):

Contoh

.div1 {
  width: 300px;
  height: 100px;
  border: 1px solid blue; 
}
.div2 {
  width: 300px;
  height: 100px;
  padding: 50px;
  border: 1px solid red;
}

Coba Sendiri

box-sizing properti yang menyelesaikan masalah ini.

Jika menggunakan properti CSS box-sizing

box-sizing properti memungkinkan kami untuk termasuk padding dan border dalam lebar dan tinggi total elemen.

Jika diatur di elemen box-sizing: border-box;jika diatur di elemen, lebar dan tinggi akan termasuk padding dan border:

Sekarang ukuran kedua div sama!
Hooray!

Contoh ini sama seperti contoh sebelumnya, kedua elemen <div> telah diatur box-sizing: border-box;:

Contoh

.div1 {
  width: 300px;
  height: 100px;
  border: 1px solid blue;
  box-sizing: border-box;
}
.div2 {
  width: 300px;
  height: 100px;
  padding: 50px;
  border: 1px solid red;
  box-sizing: border-box;
}

Coba Sendiri

Karena penggunaan box-sizing: border-box; dengan baik, banyak pengembang menginginkan semua elemen di halaman dapat bekerja dengan cara ini.

Kode di bawah ini dapat memastikan penyesuaian ukuran semua elemen dengan cara yang lebih intuitif. Banyak peramban sudah menggunakan efek ini untuk banyak elemen formulir box-sizing: border-box;（tetapi bukan semua - ini adalah alasannya input dan textarea terlihat berbeda saat width: 100%;).

Menggunakannya untuk semua elemen adalah aman dan cerdas:

Contoh

* {
  box-sizing: border-box;
}

Coba Sendiri

Properti Box Sizing CSS

Properti Deskripsi
box-sizing Definisi metode penghitungan lebar dan tinggi elemen: apakah mereka seharusnya termasuk padding dalam dan border.