Box sizing

Box sizing

Sur l’excellent tuto css learnlayout.com, on découvre la propriété css box-sizing. Le site donne l’exemple suivant : deux div contenant du texte.

.simple { width: 500px; margin: 20px auto; } 
.fancy { width: 500px; margin: 20px auto; padding: 50px; border-width: 10px; }

On voit qu’en rajoutant du padding et une bordure, toutes ces marges s’ajoutent les unes aux autres, décalant d’autant notre div.

i

La solution préconisée sur ce site est d’utiliser la propriété box-sizing, qui va assurer l’homogénéité de nos blocs.

.simple { 
width: 500px; margin: 20px auto; 
-webkit-box-sizing: border-box; 
-moz-box-sizing: border-box; 
box-sizing: border-box; 
} 
.fancy { 
width: 500px; margin: 20px auto; 
padding: 50px; 
border: solid blue 10px; 
-webkit-box-sizing: border-box; 
-moz-box-sizing: border-box; 
box-sizing: border-box; 
}

e

On peut même s’amuser à appliquer le css à tout les éléments du site :

* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box; }

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.