Table des matières Box-sizing

Rappelons que dans le modèle de boîte standard, l'attribut width ne prend en compte que le "content". Les dimensions réelles de l'emplacement d'un conteneur sont obtenues en ajoutant non seulement les dimensins du contenu mais aussi les marges et la bordure :

Exemple

Conteneur parent

Conteneur fils

box-sizing: content-box;
width: 100%;
padding: 0;
border-width: 0;

Conteneur parent

Conteneur fils

box-sizing: content-box;
width: 100%;
padding: 5px;
border-width: 10px;

Conteneur parent

Conteneur fils

box-sizing: border-box;
width: 100%;
padding: 5px;
border-width: 10px;

C'est un problème important notament pour le Responsive Web Design : on risque toujours le débordement.

Entrons dans le vif du Sujet

I Les spécifications de l'attribut box-sizing

Syntaxe CSS3
box-sizing peut prendre les valeurs :
content-box :
rien ne change
padding-box :
le padding est décompté dans le width, valeur déconseillée car elle ne résoud rien
border-box :
Les propriétés width et height (et min / max) comprennent le content, le padding et la bordure, mais pas la marge externe.
Exemple

.simple {
  width: 400px;
  margin: 20px auto;
  box-sizing: border-box;
  border: solid black 1px;
}
.fancy {
  width: 400px;
  margin: 20px auto;
  padding: 50px;
  border: solid blue 10px;
  box-sizing: border-box;
}

  Ces 2 boîtes ont la même largeur, mais pas la même hauteur (pourquoi ?):
 
 

II Déclarations initiales

Afin d'unifier une fois pour toute, le mode de calcul sur toute la page, on utilise assez courament la déclaration suivante :

Exemple
*,
*::after,
*::before {
   box-sizing:border-box;
}

Une autre syntaxe plus en finesse s'appuie sur l'héritage

html {
   box-sizing:border-box;
}
*,
*::after,
*::before {
   box-sizing:inherit;
}
Avez-vous atteint les objectifs ?
Vous devez :

Webographie

http://bit.ly/paul-irish-border-box

http://bit.ly/cssl-tricks-border-box

Testez-vous