Properti box-sizing

Properti box-sizing memungkinkan untuk mengubah cara menghitung ukuran elemen.

Secara default, penambahan padding akan memperluas elemen: jika kita mengatur lebar width 100px dan padding-left sebesar 20px, maka lebar sebenarnya dari elemen akan menjadi 120px.

Dan jika kita juga mengatur border-left sebesar 10px, maka lebar sebenarnya dari elemen akan menjadi 130px. Artinya, padding dan border memperluas blok (baik secara lebar maupun tinggi). Perilaku ini dapat diubah dengan menggunakan box-sizing.

Sintaks

cssselektor {
  box-sizing: content-box | border-box;
}

Nilai

Nilai default: content-box.

Contoh . Perilaku Standar

Saat ini kedua blok memiliki tinggi dan lebar yang sama, namun pada blok kedua padding diatur, sedangkan pada blok pertama - tidak. Perhatikan bagaimana perbedaan ukuran mereka:

html<div id="elem1">elem1</div>
<div id="elem2">elem2</div>

css#elem1 {
  width: 300px;
  height: 100px;
  margin-bottom: 10px;
  background: #f1f1f1;
}
#elem2 {
  padding: 50px;
  width: 300px;
  height: 100px;
  background: #f1f1f1;
}

Результат:

Contoh . Perilaku Standar

Saat ini kedua blok memiliki tinggi dan lebar yang sama, namun pada blok kedua diatur border sebesar 10px, sedangkan pada blok pertama - tidak. Perhatikan, perbedaan ukuran mereka:

html<div id="elem1">elem1</div>
<div id="elem2">elem2</div>

css#elem1 {
  width: 300px;
  height: 100px;
  background: #f1f1f1;
}
#elem2 {
  border: 10px solid black;
  width: 300px;
  height: 100px;
  background: #f1f1f1;
}

Результат:

Contoh . Perilaku Standar

Saat ini blok kedua memiliki baik padding maupun border sebesar 10px:

html<div id="elem1">elem1</div>
<div id="elem2">elem2</div>

css#elem1 {
  width: 300px;
  height: 100px;
  background: #f1f1f1;
}
#elem2 {
  padding: 50px;
  border: 20px solid black;
  width: 300px;
  height: 100px;
  background: #f1f1f1;
}

Результат:

Contoh . Nilai border-box

Mari tambahkan nilai border-box untuk properti box-sizing pada elemen kedua. Sekarang ukuran elemen pertama dan kedua akan menjadi sama:

html<div id="elem1">elem1</div>
<div id="elem2">elem2</div>

css#elem1 {
  width: 300px;
  height: 100px;
  background: #f1f1f1;
}
#elem2 {
  box-sizing: border-box;
  padding: 50px;
  border: 10px solid black;
  width: 300px;
  height: 100px;
  background: #f1f1f1;
}

Результат:

Lihat Juga