Propriété box-sizing

La propriété box-sizing permet de modifier la méthode de calcul des dimensions d'un élément.

Par défaut, l'ajout de padding élargit l'élément : si nous avons défini une largeur width de 100px et un padding-left de 20px, alors la largeur réelle de l'élément sera de 120px.

Et si nous définissons également une border-left de 10px, alors la largeur réelle de l'élément deviendra 130px. C'est-à-dire que le padding et la border élargissent le bloc (en largeur et en hauteur). Ce comportement peut être modifié à l'aide de box-sizing.

Syntaxe

sélecteur {
	box-sizing: content-box | border-box;
}

Valeurs

Valeur	Description
`content-box`	Le `padding` et la `border` élargissent le bloc.
`border-box`	Ni le `padding`, ni la `border` n'élargissent le bloc.

Valeur par défaut : content-box.

Exemple . Comportement standard

Actuellement, les deux blocs ont la même hauteur et la même largeur, cependant le second bloc a un padding défini, alors que le premier n'en a pas. Regardez comment leurs dimensions diffèrent :

<div id="elem1">elem1</div>
<div id="elem2">elem2</div>

#elem1 {
	width: 300px;
	height: 100px;
	margin-bottom: 10px;
	background: #f1f1f1;
}
#elem2 {
	padding: 50px;
	width: 300px;
	height: 100px;
	background: #f1f1f1;
}

Exemple . Comportement standard

Actuellement, les deux blocs ont la même hauteur et la même largeur, cependant le second bloc a une bordure de 10px, alors que le premier n'en a pas. Regardez comment leurs dimensions diffèrent :

<div id="elem1">elem1</div>
<div id="elem2">elem2</div>

#elem1 {
	width: 300px;
	height: 100px;
	background: #f1f1f1;
}
#elem2 {
	border: 10px solid black;
	width: 300px;
	height: 100px;
	background: #f1f1f1;
}

Exemple . Comportement standard

Actuellement, le second bloc a à la fois du padding et une bordure de 10px :

<div id="elem1">elem1</div>
<div id="elem2">elem2</div>

#elem1 {
	width: 300px;
	height: 100px;
	background: #f1f1f1;
}
#elem2 {
	padding: 50px;
	border: 20px solid black;
	width: 300px;
	height: 100px;
	background: #f1f1f1;
}

Exemple . Valeur border-box

Ajoutons la valeur border-box pour la propriété box-sizing au second élément. Maintenant, les dimensions du premier et du second élément deviendront identiques :

<div id="elem1">elem1</div>
<div id="elem2">elem2</div>

#elem1 {
	width: 300px;
	height: 100px;
	background: #f1f1f1;
}
#elem2 {
	box-sizing: border-box;
	padding: 50px;
	border: 10px solid black;
	width: 300px;
	height: 100px;
	background: #f1f1f1;
}

Voir aussi

la propriété outline,
qui crée une bordure n'élargissant pas l'élément