CSS : box-sizing et border-box

mémo

Aujourd’hui, j’ai (ré)appris que l’on pouvait redéfinir le comportement standard du modèle de boîte CSS avec la propriété box-sizing et la valeur border-box.

Ce modèle alternatif permet de déclarer la largeur d’un conteneur en incluant les propriétés padding, margin et border. Ça simplifie bien les choses et évite quelques calculs inutiles !

Voilà donc pourquoi on voit ce bout de CSS dans de nombreux resets.

*,
*::before,
*::after {
  box-sizing: border-box;
}

Ça ne fait que depuis 2014 qu’on en parle dans le milieu du web développement et j’étais passée complètement à côté !

Ressources

Contact

Vous souhaitez réagir ? N’hésitez pas à m’écrire à contact@luce.carevic.eu.