Eienskap box-sizing

Die eienskap box-sizing laat jou toe om die metode om die afmetings van 'n element te bereken, te verander.

Standaard maak die byvoeging van padding die element groter: as ons 'n breedte van width 100px en padding-left van 20px gestel het, sal die werklike breedte van die element 120px wees.

En as ons ook 'n border-left van 10px stel, sal die werklike breedte van die element 130px word. Dit beteken padding en border maak die blok groter (sowel in breedte as in hoogte). Hierdie gedrag kan verander word met box-sizing.

Sintaksis

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

Waardes

Standaardwaarde: content-box.

Voorbeeld . Standaard gedrag

Tans het albei blokke dieselfde hoogte en breedte, maar die tweede blok het padding gestel, en die eerste - nie. Kyk hoe hul afmetings verskil:

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;
}

Результат:

Voorbeeld . Standaard gedrag

Tans het albei blokke dieselfde hoogte en breedte, maar die tweede blok het 'n rand van 10px gestel, en die eerste - nie. Kyk, hoe hul afmetings verskil:

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;
}

Результат:

Voorbeeld . Standaard gedrag

Tans het die tweede blok beide padding en 'n rand van 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;
}

Результат:

Voorbeeld . Waarde border-box

Laat ons die waarde border-box byvoeg vir die eienskap box-sizing van die tweede element. Nou sal die afmetings van beide die eerste en die tweede element dieselfde wees:

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;
}

Результат:

Sien ook