Rozšírenie elementov v CSS pre JavaScript

Nastavenie CSS vlastností width a height nezaručuje, že element bude zadanej veľkosti. Pozrime sa na príkladoch.

Príklad

Teraz rozmery elementu zodpovedajú zadaným:

html<div id="elem">
  text
</div>

css#elem {
  width: 200px;
  height: 200px;
  margin: 50px auto;
  background: #CFF5BF;
}

Результат:

Príklad

A teraz nastavme elementu vlastnosť padding. V dôsledku toho sa skutočná šírka elementu zväčší a rozšíri o zadanú hodnotu vnútorného odsadenia:

html<div id="elem">
  text
</div>

css#elem {
  padding: 25px;
  width: 200px;
  height: 200px;
  margin: 50px auto;
  background: #CFF5BF;
}

Результат:

Príklad

Prítomnosť okraja tiež rozširuje element:

html<div id="elem">
  text
</div>

css#elem {
  width: 200px;
  height: 200px;
  margin: 50px auto;
  background: #CFF5BF;
  border: 20px solid #F0D7A1;
}

Результат:

Príklad

Vlastnosť box-sizing umožňuje meniť vyššie popísané správanie. Môžeme spraviť tak, že ani vnútorné odsadenie, ani okraj nerozširujú element. Na to je potrebné tejto vlastnosti nastaviť hodnotu border-box:

html<div id="elem">
  text
</div>

css#elem {
  box-sizing: border-box;
  padding: 20px;
  width: 200px;
  height: 200px;
  margin: 50px auto;
  background: #CFF5BF;
  border: 20px solid #F0D7A1;
}

Результат:

Dôležitosť opísaného

Z pohľadu JavaScriptu je opísaná situácia nie veľmi pohodlná. Veď sa ukazuje, že po prečítaní hodnoty vlastnosti width vôbec nemôžeme byť istí, že element bude práve tejto šírky.