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:

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

#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:

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

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

Príklad

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

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

#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:

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

#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.