Vlastnosť box-sizing

Vlastnosť box-sizing umožňuje meniť spôsob výpočtu rozmerov elementu.

Predvolene pridanie padding rozširuje element: ak sme nastavili šírku width 100px a padding-left na 20px, tak skutočná šírka elementu bude 120px.

A ak nastavíme aj border-left na 10px, tak skutočná šírka elementu sa stane 130px. To znamená, že padding a border rozširujú blok (aj po šírke, aj po výške). Toto správanie je možné zmeniť pomocou box-sizing.

Syntax

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

Hodnoty

Predvolená hodnota: content-box.

Príklad . Štandardné správanie

Teraz majú oba bloky rovnakú výšku a šírku, avšak druhý blok má nastavený padding, kým prvý - nie. Pozrite sa, ako sa líšia ich rozmery:

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

Результат:

Príklad . Štandardné správanie

Teraz majú oba bloky rovnakú výšku a šírku, avšak druhý blok má nastavený okraj 10px, kým prvý - nie. Pozrite sa, ako sa líšia ich rozmery:

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

Результат:

Príklad . Štandardné správanie

Teraz má druhý blok aj padding, aj okraj 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;
}

Результат:

Príklad . Hodnota border-box

Pridajme druhému elementu hodnotu border-box pre vlastnosť box-sizing. Teraz sa rozmery prvého aj druhého elementu stanú rovnakými:

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

Результат:

Pozrite tiež