Box-sizingLa propriété box-sizing permet de spécifier si la marge intérieure (padding) et la bordure (border) d'un élément doivent compter dans sa dimension réelle.
Afin d'illustrer l'impact de cette propriété, une boite de 200x200px contenant 5 lettres sera utilisée avec les différentes valeurs de box-sizing.
Est la valeur par défaut attribué à la propriété box-sizing. Par défaut, tous les éléments d'une page utilisent ce box-model. Ce mode donne priorité au contenu. Évitant ainsi que l'espace alloué au contenu change de dimension lorsqu'une marge intérieure (padding) ou une bordure (border) lui est ajoutée.
Par exemple, la boite ayant le contenu (A - B - C - D - E) ne change pas la disposition de son contenu même si un padding de 40px lui est ajouté. En contrepartie, la boite mesure maintenant réellement 280px (40px + 200px + 40px).
À gauche, sans padding.À droite, avec un padding de 40px.
Ce mode sert à donner priorité à la dimension réelle de la boite. Évitant ainsi qu'elle change de dimension lorsqu'une marge intérieure (padding) ou une bordure (border) lui est ajoutée.
Par exemple, la boite ayant le contenu (A - B - C - D - E) ne change jamais de dimension (200x200px). En contrepartie, Le contenu (A - B - C - D - E) doit ajuster sa disposition lorsqu'un padding de 40px est ajouté à la boite, puisque l'espace alloué au contenu se trouve réduit afin de ne pas modifier la dimension réelle de la boite.
À gauche, sans padding.À droite, avec un padding de 40px.
border-box est particulièrement utile lorsque des éléments ont une dimension en %.
Par exemple, une boite prenant toute la largeur de la fenêtre et ayant une marge intérieure de 20px:
En box-sizing: content-box, la taille réelle de cette boite dépasserait celle de la fenêtre. Créant ainsi une barre de défilement horizontale et une mise en page quelque peu étrange.
Tandis qu'en box-sizing: border-box, puisque les marges intérieures (padding) sont comptées à même la largeur totale, la boite est en mesure de prendre toute la largeur de la fenêtre, d'avoir ses marges intérieures sans pour autant dépasser de ladite fenêtre.
De nos jours, la majorité des développeurs convertissent toutes les boites de leurs pages en border-box via le code suivant placé en début de feuille CSS:
Ceci permet de simplifier la réalisation de mises en page.