: css

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:

boxmodel.png

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:

Attention: Cette propriété n'est pas encore finalisée. En mars 2014, elle n'est que partiellement supportée par les navigateurs les plus récents, pas du tout sur les plus anciens. Firefox requière toujours l'utilisation de la propriété -moz- pour la faire fonctionner.

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:

section {
  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.

le contexte de formatage

Editer