Le modèle de boîte

Cours · CSS : mettre en forme le Web (école d'ingénieur), chapitre 5 · école d'ingénieur, informatique · le début du chapitre, la suite sur Adloun

À la fin du chapitre précédent, la Librairie du Campus avait trouvé ses couleurs et ses polices. Mais ses livres s'empilent encore les uns sous les autres comme les lignes d'un document : pas d'espace pour respirer, pas de cadre, rien qui ressemble à la vitrine d'une librairie. Pour présenter chaque livre sur une carte — une couverture, un titre, un prix, un cadre blanc aux coins arrondis —, il faut comprendre comment le navigateur découpe la page.

Il la découpe en boîtes. Chaque élément HTML engendre une boîte rectangulaire, et la taille de cette boîte obéit à des règles précises : largeur du contenu, plus un rembourrage, plus une bordure, plus une marge. Ce chapitre les détaille, avec les calculs, et explique les deux surprises classiques du débutant : la boîte plus large que la largeur demandée, et les marges qui « disparaissent ».

Objectifs du chapitre

Décrire les quatre zones d'une boîte (contenu, padding, border, margin) et les lire dans les outils de développement.
Calculer la taille d'une boîte en content-box et en border-box ; adopter la remise à zéro universelle.
Prévoir la fusion des marges verticales, et savoir l'empêcher.
Écrire les raccourcis à une, deux, trois ou quatre valeurs ; centrer un bloc avec margin: 0 auto.
Distinguer display: block, inline, inline-block et none.
Maîtriser le débordement (overflow, points de suspension) et le décor (contour, coins arrondis, ombres).

5.1 Les quatre zones d'une boîte

Prenons une page qui ne contient qu'une boîte et un paragraphe.


<div class="boite">Contenu de la boîte</div>
<p>Le paragraphe qui suit la boîte.</p>


body {
  margin: 0;
  font-family: system-ui, sans-serif;
}

.boite {
  width: 200px;
  padding: 20px;
  border: 5px solid #1f3a68;
  margin: 30px;
  background: #dbe4f0;
}

Le navigateur l'affiche ainsi (capture à 600 pixels de large) :

Définition 5.1Modèle de boîte

Chaque élément affiché engendre une boîte formée de quatre zones emboîtées, de l'intérieur vers l'extérieur :

le contenu (content) : le texte, l'image, les boîtes enfants ; ses dimensions sont width et height ;
le rembourrage (padding) : l'espace entre le contenu et la bordure ; il prend la couleur de fond de l'élément ;
la bordure (border) : le trait qui entoure le rembourrage ;
la marge (margin) : l'espace extérieur qui sépare la boîte de ses voisines ; elle est toujours transparente.

Le schéma ci-dessous reprend notre boîte, cotes en pixels.

La largeur occupée par la boîte se calcule en additionnant les zones des deux côtés :

contenu (`width`)	200
rembourrage	$2 \times 20 = 40$
bordure	$2 \times 5 = 10$
boîte bordée	250	ce que l'on voit
marges	$2 \times 30 = 60$
encombrement	310	la place réservée dans la page

Dans Chromium, getBoundingClientRect() renvoie pour la boîte une largeur de 250 et une abscisse de 30 (la marge de gauche) ; le paragraphe suivant commence à l'ordonnée 128 : $30 + 68 + 30$ , où 68 est la hauteur bordée ( $18 + 40 + 10$ , une ligne de texte de 18 pixels).

Méthode — lire une boîte dans les outils de développement

Clic droit sur l'élément, « Inspecter » (ou F12).
Dans l'onglet Styles, faire défiler jusqu'en bas : le schéma de boîte montre quatre rectangles emboîtés (margin, border, padding, contenu) avec leurs valeurs. Un double-clic sur une valeur permet de la modifier en direct.
Survoler l'élément dans l'arbre HTML : la page colore le contenu en bleu, le rembourrage en vert, la marge en orange.
L'onglet Computed donne les valeurs finales en pixels, quelle que soit l'unité écrite dans la feuille.

La suite du cours est sur Adloun

Le chapitre en entier, formules et figures comprises, avec le tuteur, les fiches, les QCM et les exercices.

Lire la suite du cours

En accès libre, sans inscription.

Exercices corrigés de ce chapitre

Lire la suite du cours →