Rozszerzanie elementów w CSS dla JavaScript

Ustawienie właściwości CSS width i height nie gwarantuje, że element osiągnie określony rozmiar. Spójrzmy na przykładach.

Przykład

Teraz rozmiary elementu pokrywają się z zadanymi:

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

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

Przykład

A teraz ustawmy elementowi właściwość padding. W rezultacie rzeczywista szerokość elementu stanie się większa i rozszerzy się o podaną wartość wewnętrznego marginesu:

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

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

Przykład

Obecność obramowania również rozszerza element:

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

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

Przykład

Właściwość box-sizing pozwala zmieniać opisane powyżej zachowanie. Można sprawić, aby ani wewnętrzny margines, ani obramowanie nie rozszerzały elementu. Dla tej właściwości należy ustawić wartość 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;
}

Ważność opisanej sytuacji

Z punktu widzenia JavaScript opisana sytuacja nie jest zbyt wygodna. W końcu okazuje się, że po przeczytaniu wartości właściwości width wcale nie możemy być pewni, że element będzie dokładnie tej szerokości.