CSS3 : la propriété box-sizing

Attention page non responsive.
Orientez votre tablette en mode portrait.

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.
Il en est de même pour la hauteur de la boite : les marges et bordures verticales s'ajoutent à la hauteur totale.
Désormais avec CSS3 et la nouvelle propriété box-sizing on peut contrôler la largeur totale de la boite !

La propriété box-sizing

Exemple 1

Le code correspondant

... main {border : 1px solid red ; width : 900px ;margin :auto ; } div.type1 {padding : 50px ; border : 50px solid skyblue ; margin-top : 10px; box-sizing:content-box;} ... <main> <div class ="type1"> <p>width : non précisé ! </div> <div class= "type1" style ="width : 400px ; "> <p>width : 400px ! </div> <div class ="type1" style ="width : 720px ; "> <p>width : 720px ! </div> </main>

Le rendu

width : non précisé !

width : 400px !

width : 720px !

Commmentaire

La propriété box-sizing vaut "content-box".
Elle aurait pu être omise puisque c'est la valeur par défaut.

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

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 jusqu'aux bordures = 600px !
Le troisième DIV a une largeur définie de 720 donc largeur totale jusqu'aux bordures = 920px ! Il y a débordement par rapport au conteneur ; c'est très laid.

Exemple 2

Le code correspondant

La règle de style relative à BODY toujours valable.

... div.type2 {padding : 50px ; border : 50px solid yellow ; margin-top : 10px; box-sizing:border-box;} ... <main> <div class ="type2"> <p>width : non précisé ! </div> <div class= "type2" style ="width : 400px ; "> <p>width : 400px ! </div> <div class ="type2" style ="width : 720px ; "> <p>width : 720px ! </div> </main>

Le rendu

width : non précisé !

width : 400px !

width : 720px !

Commentaire

La propriété box-sizing vaut "border-box" pour les trois DIV.

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 et sa largeur jusqu'aux bordures = 400px.
Le troisième DIV a une largeur définie de 720 et sa largeur jusqu'aux bordures = 720px.

Si vous modifiez les largeurs de marges internes et bordures, les boites DIV class ="type2" auront toujours pour largeur totale celle précisée par la propriété "width" ! C'est la largeur interne (celle réservée au contenu) qui variera (en plus ou en moins).

Conclusion

La propriété "box-sizing" avec la valeur "border-box" est de plus en plus utilisée car elle facilite grandement le travail du développeur web. Il sait désormais qu'il pourra modifier les tailles des marges internes (et des bordures) des boites sans provoquer de catastrophes au niveau de la mise en page (boites passant à la ligne ou débordant du conteneur).

Il est donc fortement conseillé d'indiquer dans la feuille de style d'un site :

* {box-sizing : border-box ; }

Ainsi "border-box" devient la valeur par défaut des boites au niveau de votre site.
Retour menu