Box Sizing CSS

Box Sizing CSS

CSS box-sizing Properti ini 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 sebenarnya elemen
  • height + padding + border = tinggi sebenarnya elemen

Artinya: Ketika Anda menetapkan lebar/tinggi elemen, elemen biasanya terlihat lebih besar daripada yang Anda tetapkan (karena border dan padding elemen sudah ditambahkan ke lebar/tinggi yang ditetapkan elemen).

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

Div ini lebih kecil
（lebar 300px, tinggi 100px）。
Div ini lebih besar
（lebar juga 300px, tinggi 100px）。

Dua elemen <div> di atas menunjukkan ukuran yang berbeda dalam 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;
}

Cuba Sendiri

box-sizing Properti ini memecahkan 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 diset ke elemen box-sizing: border-box;Jika diset ke elemen, lebar dan tinggi akan termasuk padding dan border:

Sekarang ukuran kedua div adalah sama!
Hooray!

Contoh ini adalah 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;
}

Cuba Sendiri

Kerana penggunaan box-sizing: border-box; kesan yang baik, banyak pengembang menginginkan semua elemen di laman untuk beroperasi dengan cara ini.

Kod berikut ini dapat memastikan penyesuaian saiz semua elemen dengan cara yang lebih intuatif. Banyak pereka menginginkan semua elemen di laman untuk beroperasi seperti ini. box-sizing: border-box;（tetapi bukan semua - ini adalah sebab alat input dan textarea kelihatan berbeza apabila width: 100%;).

Menyertakan semuanya adalah aman dan bijak:

Contoh

* {
  box-sizing: border-box;
}

Cuba Sendiri

Properti Box Sizing CSS

Properti Penerangan
box-sizing Mengatur cara mengira lebar dan tinggi elemen: sama ada ia seharusnya termasuk margin (padding) dan border.