Rozšíření prvků v CSS pro JavaScript

Nastavení CSS vlastností width a height negrantuje, že prvek bude dané velikosti. Podívejme se na příkladech.

Příklad

Nyní se velikosti prvku shodují s nastavenými:

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

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

Příklad

A nyní nastavme prvku vlastnost padding. Výsledkem bude, že skutečná šířka prvku bude větší a rozšíří se o zadanou hodnotu vnitřního odsazení:

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

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

Příklad

Přítomnost ohraničení také rozšiřuje prvek:

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

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

Příklad

Vlastnost box-sizing umožňuje měnit výše popsané chování. Lze zařídit, aby ani vnitřní odsazení, ani ohraničení nerozšiřovaly prvek. K tomu je třeba této vlastnosti nastavit 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žitost popsaného

Z pohledu JavaScriptu je popsaná situace ne příliš pohodlná. Vždyť vychází najevo, že po přečtení hodnoty vlastnosti width si vůbec nemůžeme být jisti, že prvek bude právě této šířky.