La propriété CSS box-sizing

Notez que cet article a été écrit pour la première fois il y a plus de 2 ans, mais n'est pas nécessairement obsolète.

Different box sizes - box-sizing
Different box sizes – box-sizing

Par défaut, le navigateur calcule la largeur/hauteur d’une boite (div) sur le contenu (content-box). Cela amène des difficultés, lorsque l’on a un padding (marge intérieure) non-nul et une bordure. Le calcul de la largeur de la boite ne prend pas en compte ces deux valeurs.

Raisonnons sur la largeur (width):

Si on définit une boite de 200px avec un padding de 20px et une bordure de 5px à gauche et à droite.
La largeur finale de la boite sera de : 200 + 2×20 + 2×5 = 250 px.

La propriété CSS box-sizing permet de changer ce mode de calcul.

Cette propriété, bien qu’elle ne soit pas encore validée entièrement par le W3C, est supportée dans tous les navigateurs modernes, au moins pour la valeur border-box.

La largeur effective de cette boite (padding + border) sera de 250px.

Avec un pourcentage de 100% :

La boite dépassera de son conteneur de : 2×20 + 2×5 = 50 px.

En ajoutant box-sizing: border-box, on résout beaucoup de difficultés. Le calcul se fait alors en tenant compte du padding et de la bordure :

La boite créée aura une largeur effective de 200px, le contenu se répartissant sur: 200 – 2×20 -2×5 = 150 px.

Et si l’on définit la largeur à 100% :

La boite de dépassera pas de son conteneur.

Afin d’initialiser le comportement par défaut des navigateurs, il est judicieux d’écrire au début de son CSS:

Une autre valeur de box-sizing est padding-box, pas encore supportée par tous les navigateurs.

Et hop, des boites (div, input, …) qui ont le comportement attendu sur leurs dimensions.

Soumettre un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *