CSS3 : la propriété box-sizing

Lorqu'un bloc a une largeur définie (avec width) on oublie souvent que par défaut sa largeur totale peut être beaucoup plus importante ...
En effet les marges et bordures latérales sont alors ajoutées par défaut à la largeur définie.
Désormais avec CSS3 et la nouvelle propriété box-sizing on peut contrôler la largeur totale de la boite !

Largeurs interne et totale d'une boite "enfant" dans son parent conteneur

Il faut rappeler le comportement par défaut d'un élément bloc.

Lorsqu'aucune largeur n’est définie pour un boite alors sa largeur totale sera égale à celle de son conteneur (et donc sa largeur interne égale à sa largeur totale diminuée des marges et bordures latérales).
En revanche, dès qu’on définit une largeur pour une boite (avec la propriété width) et qu'on lui applique aussi des marges et bordures latérales alors c'est la largeur interne qui correspond à la valeur de width !

Exemples

Sachant que la largeeur de BODY est 900px.

Le DIV a une largeur totale de 900px = celle du conteneur (pas de propriété width).

Le DIV a une largeur définie de 400 pixels mais sa largeur totale est égale à 600 (400 + 200).

Le DIV a une largeur définie de 720 mais sa largeur totale est (720 +200)
Donc débordement par rapport au parent conteneur ce qui est très laid et fort génant dans le cadre du responsive design.

Le code correspondant

body {border : 1px solid red ; width : 900px ;margin :auto ; } div {padding : 50px ; border : 50px solid skyblue ; margin-top : 10px;} ... <div> ... </div> <div style ="width : 400px ; "> ... </div> <div style ="width : 720px ; "> ... </div> ...

D'après la règle de style une boite DIV comprend des marges internes de 50px et des bordures de 50px gauches et droites.

Le premier DIV n'a pas de largeur définie donc largeur totale = 900 (celle du conteneur).
Le deuxième DIV a une largeur définie de 400 donc largeur totale = 600
Le troisième DIV a une largeur définie de 720 donc largeur totale = 920

La propriété box-sizing

Avec cette nouvelle propriété CSS et si sa valeur est "border-box" alors la largeur totale = valeur de width. et la largeur interne est égale à la largeur définie moins les marges et bordures.

Exemples

Le code correspondant

Les règles de style relatives à BODY & DIV s'appliquent toujours.

Le code HTML & CSS (en ligne) :

... <div style ="width : 720px ; box-sizing : content-box;" > ... </div> <div style ="width : 720px ; box-sizing : border-box;" > ... </div> ...

Le rendu

box-sizing : content-box
La boite a une largeur interne correspondant à celle définie par width soit 720px.
Donc la largeur totale est majorée des marges et bordures latérales : 720 + 200 = 920
Donc débordement par rapport au parent conteneur ce qui est très laid et fort génant dans le cadre du responsive design.

box-sizing : border-box
La boite a une largeur totale correspondant à celle définie par width soit 720px.
Et la largeur interne = 720 - 200 = 520

Dans le premier DIV je n'étais pas obligé de préciser box-sizing : content-box puisque c'est la valeur par défaut de cette propriété.

Ce qui faut retenir :
Si "box-sizing" vaut "border-box" alors la propriété "width" exprime la largeur totale !

Retour menu