Quand on débute en CSS, on pense souvent qu'un élément qui fait 300px de large occupe exactement 300px dans la page. En réalité, cela dépend aussi de ses marges internes et de ses bordures. Pour bien comprendre comment le navigateur calcule la taille réelle d'un bloc, il faut connaître le modèle de boîte CSS et la propriété box-sizing.
Comment est calculée la taille d'un élément ?
En CSS, la plupart des éléments fonctionnent comme des boîtes. Cette boîte est composée de plusieurs zones :
- le contenu,
-
les marges internes avec
padding, -
les bordures avec
border, -
et les marges externes avec
margin.
Quand vous donnez une largeur ou une hauteur à un élément, il faut donc faire attention à ce qui est réellement pris en compte dans le calcul final.
Par exemple, prenons une <div> avec une largeur de 300px, un padding de 20px à gauche et à droite, puis une bordure de 5px de chaque côté.
<div class="boite">
Ma boîte
</div>
.boite{
width: 300px;
padding: 20px;
border: 5px solid #000;
}
À première vue, on pourrait croire que cette boîte mesure 300px de large. Pourtant, ce n'est pas tout à fait vrai.
Par défaut, la largeur de 300px ne correspond qu'à la zone de contenu. Il faut donc ajouter les marges internes et les bordures.
Le calcul devient donc :
-
300pxpour le contenu, -
20px + 20pxpour le padding gauche et droit, -
5px + 5pxpour les bordures gauche et droite.
La taille totale affichée sera donc de 350px.
Introduction à la propriété CSS box-sizing
C'est justement pour mieux contrôler ce calcul que la propriété box-sizing existe.
Elle permet de dire au navigateur comment il doit interpréter la largeur et la hauteur d'un élément.
Il existe principalement deux valeurs à connaître :
-
content-box, -
border-box.
Par défaut, les navigateurs utilisent content-box.
Autrement dit, si vous ne précisez rien, c'est ce comportement qui sera appliqué.
content-box
Avec box-sizing: content-box;, la largeur et la hauteur définies en CSS s'appliquent uniquement au contenu.
Le padding et les borders viennent donc s'ajouter par-dessus.
.boite{
box-sizing: content-box;
width: 300px;
padding: 20px;
border: 5px solid #000;
}
Voilà ce que cela signifie :
-
le contenu fait
300px, -
la boîte visible fait plus large que
300px, - le padding et la bordure augmentent la taille totale.
Ce mode de calcul est utile à connaître, mais il peut devenir gênant quand on veut maîtriser facilement la largeur finale d'un élément.
Attention ! C'est souvent ce comportement qui surprend les débutants. On fixe une largeur, puis on ajoute du padding, et l'élément devient soudainement plus large que prévu.
border-box
Avec box-sizing: border-box;, le raisonnement change.
Cette fois, la largeur et la hauteur incluent déjà :
- le contenu,
- le padding,
- la bordure.
Reprenons exactement le même exemple :
.boite{
box-sizing: border-box;
width: 300px;
padding: 20px;
border: 5px solid #000;
}
Ici, la boîte fera toujours 300px de large au total.
Le navigateur ajuste donc automatiquement la taille de la zone de contenu pour laisser la place au padding et à la bordure.
Le résultat est souvent plus simple à gérer, surtout quand on construit une mise en page.
Voilà pourquoi beaucoup de développeurs préfèrent travailler avec border-box : le calcul mental est plus simple, et la mise en page devient plus prévisible.
Comment utiliser box-sizing globalement ?
Plutôt que d'appliquer box-sizing élément par élément, il est très courant de l'appliquer à toute la page.
Pour cela, on peut utiliser cette règle CSS :
*{
box-sizing: border-box;
}
Cette syntaxe applique border-box à tous les éléments de la page.
C'est simple, pratique, et très utilisé dans les projets web.
Vous pouvez aussi rencontrer une version un peu plus complète :
html{
box-sizing: border-box;
}
*, *:before, *:after{
box-sizing: inherit;
}
Cette méthode permet de faire hériter la valeur depuis la balise <html>.
Dans les deux cas, l'idée reste la même : travailler avec un calcul de taille plus simple et plus fiable.
Si vous débutez, retenez surtout ceci :
-
avec
content-box, la largeur ne concerne que le contenu, -
avec
border-box, la largeur correspond à la taille totale visible de l'élément.
En pratique, utiliser box-sizing: border-box; globalement est souvent un très bon réflexe pour éviter les mauvaises surprises.