Le modèle de boîte
Le modèle de boîte décrit la manière dont interviennent les différentes propriétés width, height, margin, padding, border afin de déterminer les dimensions d'une boîte rectangulaire.
Le modèle de boîte officiel W3C
Voici un schémas pour comprendre le modèle de boîte standard W3c:
- les propriétés width et height représentent la surface utile pour le contenu (texte.image,...)
- la propriété padding permet d'ajouter un espacement intérieur entre le contenu et le bord de la boîte
- la propriété border permet d'ajouter une bordure de différentes sortes, épaisseurs, couleurs, images,...
- la propriété margin est une marge extérieur qui permet d'espacer les boîtes entre elles
Ce mode de calcul des boîte est appliqué, par défaut, sur tous les navigateurs en mode de rendu standard. Les vieilles versions d'Internet explorer (IE5) calculaient différemment les dimensions: la surface utile était calculée comme le reste du width après soustraction des border et padding (cf plus bas la propriété box-sizing). Depuis IE6 (IE5 mac) Internet Explorer respecte le modèle de boîte standard pour peu qu'un doctype soit correctement renseigné, tout en haut de la page. En l'absence de doctype, IE6-9 passe en mode quirks et appliquent le modèle de boîte Microsoft sus-cité.
les problèmes rencontrés avec le modèle standard
Tant que l'on privilégie exclusivement l'utilisation du pixel comme unité de mesure, le modèle de boîte par défaut convient très bien. il demande tout au plus une certaine gymnastique pour calculer la surface réelle demandée par l'addition des différentes dimensions.
Le problème intervient lorsque l'on souhaite utiliser différentes unités au sein d'une même boîte. Un width en % (49% par exemple), additionné d'un border en pixel (3px), ne représentera pas un pourcentage fixe en fonction d'une modification de la largeur disponible. Cela devient vite un casse-tête si l'on souhaite réaliser un site fluide ou présentant correctement sur tous types de plate-forme. Afin de contourner la problématique, on en arrive souvent à devoir imbriquer des boîtes les une dans les autres: l'une avec un width de 50%, à l'intérieur, une autre avec le border de 3px.
La propriété CSS3 box-sizing
La propriété box-sizing permet de modifier la manière dont dont calculée les dimensions de la boîte. Outre le valeur par défaut content-box elle peut prendre 2 autres valeurs:
- border-box: le width et height incluent alors la bordure et le padding; c'est l'équivalent du modèle de boîte par défaut des anciens IE.
- padding-box: le width et height incluent le padding et sont contenus à l'intérieur du border.
L'expression mathématique calc()
css 3 propose une expression calc() afin de permettre des calculs dans la feuille css. On va pouvoir ainsi soustraire les pixels des borders au width en % par exemple:
float: left;
margin: 1em; border: solid 1px;
width: calc(100%/3 - 2*1em - 2*1px);
}
La fusion de marges
les marges de deux boîtes, normalement dans le flux, imbriquées ou qui se suivent voient leurs mages verticales fusionner.
Un border, un padding ou un nouveau contexte de formatage peuvent éviter la fusion des marges pour 1 block inclus dans l'autre.
