Box Sizing, la propriété magique !

Un article encore signé CSS ! Pour spécifier la taille d’un bloc quelconque en HTML, par exemple un div ou un span , on utilise la propriété width . Mais savez-vous que la taille réelle de ce bloc n’est pas la valeur de width ?

En effet, la vraie taille d’un élément prend bien évidemment en compte les valeurs width et height , mais aussi sa bordure et son padding (la marge entre la bordure et le contenu) !

Bref du coup on ne sait plus trop qu’elle taille notre bloc fait réellement et cela peut être un peu embêtant, surtout si vous avez des contraintes et que vous voulez des tailles précises. Heureusement, ici on aime le code sans prise de tête, je vous présente une petite astuce qui va vous faire économiser des calculs et du temps ! C’est parti !

La propriété magique !

Les éléments HTML ont 2 manières de gérer leurs tailles et cela se fait par la propriété box-sizing qui veut dire clairement « taille d’une boite » ! Dans notre cas, on va plutôt dire la taille d’un bloc ! 😎

Par défaut, la propriété box-sizing est à content-box ce qui veut dire qu’il prend en compte dans le calcul de sa longueur la propriété width , son padding et sa bordure. Pour le calcul de sa hauteur c’est la même chose, sauf qu’il prend height au lieu de width .

Du coup la taille réelle d’un bloc avec box-sizing: content-box se calcule : width ou height + padding + border .

Si on veut que notre bloc fasse exactement 200px de longueur, mais qu’en plus il faut qu’il ait une marge intérieure et une bordure, cela va demander quelques calculs. Imaginons que width soit égale à 200px, si on lui ajoute un padding de 20px alors la taille réelle n’est pas 200px, mais 220px ! Du coup, cela devient gênant, car on veut 200px tout pile, soit on retire 20px à width , soit on peut utiliser la deuxième valeur de notre propriété magique qui est …

…Border-box

Quand la propriété box-sizing est à border-box , sa taille réelle est égal à width et height , peu importe la valeur des autres propriétés. En effet, si width est à 200px et le padding a 20px, la taille réelle du bloc restera à 200px ! Finis les calculs pas cool lorsqu’il faut changer certaines propriétés.

Par-contre, le seul inconvénient de cette méthode est qu’il y aura du coup moins de place pour le contenu du bloc, s’il y a du texte dans le bloc, il n’aura que 180px de place contrairement à la valeur content-box où le texte sera assuré d’avoir ses 200px de place.

Pour pouvoir l’utiliser, c’est tout simple, mais je le mets quand même :

div{
 box-sizing: border-box;
}

Cette propriété est relativement récente, même si tous les navigateurs la supportent dans leur dernière version, elle n’est pas compatible sur les anciennes. Donc pour avoir un maximum de compatibilité, voici le code complet :

div{
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 -ms-box-sizing: border-box;
 -o-box-sizing: border-box;
 box-sizing: border-box;
}

Box-sizing ne fonctionne pas que pour width et height , elle fonctionne aussi sur leurs variantes min- et max-

Utiliser cette méthode présente que des avantages en termes de gain de temps sur les calculs et de tranquillité d’esprit lorsque vous devez spécifier une taille à un bloc 8-). Si vous voulez garantir par contre que le contenu d’un bloc fasse une taille fixe, peu importe sa taille réelle, mieux vaut le laisser par défaut.

A++ 🙂