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++ 🙂