Extension des éléments en CSS pour JavaScript

Définir les propriétés CSS width et height ne garantit pas que l'élément prendra la taille spécifiée. Regardons cela avec des exemples.

Exemple

Actuellement, les dimensions de l'élément correspondent à celles définies :

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

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

Exemple

Et maintenant, définissons la propriété padding pour l'élément. En conséquence, la largeur réelle de l'élément deviendra plus grande et s'étendra de la valeur spécifiée de la marge intérieure :

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

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

Exemple

La présence d'une bordure étend également l'élément :

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

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

Exemple

La propriété box-sizing permet de modifier le comportement décrit ci-dessus. Il est possible de faire en sorte que ni la marge intérieure, ni la bordure n'étendent l'élément. Pour cela, il faut attribuer à cette propriété la valeur 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;
}

Importance de ce qui est décrit

Du point de vue de JavaScript, la situation décrite n'est pas très pratique. En effet, il s'avère qu'en lisant la valeur de la propriété width, nous ne pouvons absolument pas être sûrs que l'élément aura exactement cette largeur.