Tâche

Explorer les différences pratiques entre les valeurs content-box et border-box pour la propriété box-sizing. Tâches à réaliser :

• Appliquer la valeur content-box à la propriété box-sizing pour l’élément avec l’identifiant content-box.
• Appliquer la valeur border-box à la propriété box-sizing pour l’élément avec l’identifiant border-box.

• box-sizing: content-box : La largeur et la hauteur excluent le remplissage (padding) et la bordure.
• box-sizing: border-box : La largeur et la hauteur incluent le remplissage (padding) et la bordure.

Explication

Dans cet exemple, deux éléments div utilisent chacun une valeur différente pour la propriété box-sizing :

• Le premier div possède une bordure rouge et utilise la valeur par défaut content-box pour la propriété box-sizing. Même si la width et la height sont définies à 200px, le padding et la border ajoutent de l'espace supplémentaire, ce qui donne des dimensions supérieures à 200px dans les deux directions ;
• À l'inverse, le second div présente une bordure bleue et utilise la valeur border-box pour la propriété box-sizing. Ici, la width et la height restent à 200px, mais le padding et la border sont inclus dans les dimensions du bloc.

On peut observer la différence de taille entre les deux boîtes : la première est plus grande à cause de l'espace ajouté par le padding et la border, tandis que la seconde conserve une taille constante de 200px, incluant le padding et la border.