Le modèle de boîte CSS

Tu donnes à une carte une largeur de 300px, tu ajoutes un espacement intérieur et une bordure - et soudain, la carte dépasse de sa colonne. Rien n'est cassé : c'est ainsi que fonctionne le modèle de boîte CSS (box model), et une fois que tu l'auras compris, ce genre de surprise ne te prendra plus au dépourvu.

Dans le contexte du HTML, chaque élément peut être traité comme une boîte, semblable à un colis que l'on envoie par la poste. Analysons cela à l'aide de l'exemple d'un colis :

Dimensions du colis : chaque boîte a des dimensions précises, comme la hauteur (propriété height) et la largeur (propriété width).

Bordure du colis : une boîte peut avoir une bordure, par exemple un papier décoratif, ce qui correspond à la propriété border en CSS.

Distance entre les colis : comme on ne sait pas toujours ce que contient un envoi, le colis doit garder une certaine marge par rapport aux autres envois, ce qui correspond en CSS à la propriété margin.

Espace à l'intérieur du colis : on ne peut pas emballer dans un colis un objet plus grand que lui, il faut donc laisser un peu d'espace à l'intérieur de la boîte, ce qu'on appelle le padding.

En Égypte, un sarcophage a exactement la même structure : la momie au centre, un rembourrage autour d'elle, puis les parois dorées, et entre les sarcophages du tombeau, un espace libre.

Les quatre couches de la boîte

Nous interprétons chaque élément de la page comme une boîte qui a ses propres dimensions et quatre couches, emboîtées les unes dans les autres. Voici un schéma, de la couche extérieure vers le centre :

1+-------------------------------------------+
2| margin                                    |
3|   +-----------------------------------+   |
4|   | border                            |   |
5|   |   +---------------------------+   |   |
6|   |   | padding                   |   |   |
7|   |   |   +-------------------+   |   |   |
8|   |   |   |      content      |   |   |   |
9|   |   |   +-------------------+   |   |   |
10|   |   +---------------------------+   |   |
11|   +-----------------------------------+   |
12+-------------------------------------------+

Content est le contenu de l'élément, par exemple du texte. Padding est l'espacement entre le contenu et la bordure, border est la bordure elle-même, et margin l'espacement extérieur, qui sépare l'élément de ses voisins. Le fond de l'élément remplit le contenu, le padding et la zone sous la bordure, mais ne s'étend jamais sur la marge - la marge est toujours transparente.

Souviens-toi que les éléments ont des dimensions même lorsque nous ne les déclarons pas. Souviens-toi aussi de ne pas définir la hauteur et la largeur de tous les éléments - c'est une erreur fréquente chez les personnes qui débutent avec les styles. Un élément de type bloc sans largeur définie occupe de lui-même toute la largeur disponible, et une hauteur fixe fera déborder un texte plus long hors de la boîte.

Border - la bordure

La bordure (border) est tout simplement le contour d'un élément. Cela peut être, par exemple, le contour d'un pixel d'épaisseur d'une carte sur une page web. Le plus souvent, tu l'écris sous forme de raccourci, en indiquant sur une seule ligne l'épaisseur, le style et la couleur :

1.carte {
2  border: 1px solid gold;
3}

Dans l'exemple, l'ordre est le suivant : l'épaisseur (1px), le style (solid, c'est-à-dire une ligne continue) et la couleur (gold) - le navigateur les accepte aussi dans un autre ordre, mais celui-ci est le plus courant. En plus de solid, tu rencontreras dashed (tirets), dotted (pointillés) et double (double trait). Sans style, la bordure n'apparaît pas du tout, car sa valeur par défaut est none. Tu ajoutes des coins arrondis avec une propriété séparée, par exemple border-radius: 10px.

Margin et padding

La marge sert à créer des espacements entre les éléments, et le padding à créer des espacements à l'intérieur d'un élément donné. Un exemple serait une carte dont le texte se trouve à 20px des bords de la section, tandis que la carte elle-même garde une distance de 15px avec ses voisins :

1.carte {
2  padding: 20px;
3  margin: 15px;
4}

Une seule valeur définit l'espacement des quatre côtés à la fois. Tu peux aussi régler chaque côté séparément : margin-top, margin-right, margin-bottom et margin-left - padding-top, padding-right, padding-bottom et padding-left fonctionnent de la même manière. Dans le raccourci à quatre valeurs, l'ordre suit le sens des aiguilles d'une montre, en partant du haut :

1.carte {
2  margin: 10px 20px 30px 40px;
3}

Cette carte a une marge de 10px en haut, de 20px à droite, de 30px en bas et de 40px à gauche. Le raccourci padding fonctionne de la même façon, et deux valeurs, par exemple padding: 10px 20px, signifient : 10px en haut et en bas, et 20px sur les côtés.

Quelle place la boîte occupe-t-elle vraiment ?

Revenons au problème du début de la leçon. Par défaut, width définit la largeur du contenu seul, et le padding et la bordure s'y ajoutent des deux côtés :

1.sarcophage {
2  width: 200px;
3  padding: 20px;
4}

Cet élément occupera 240px de largeur à l'écran : 200px de contenu, plus 20px de padding à gauche et à droite. S'il avait en plus une bordure de 5px d'épaisseur, 10px de plus viendraient s'ajouter. La marge n'agrandit pas la boîte, mais elle éloigne les voisins. Si tu préfères que width désigne la boîte entière, padding et bordure compris, ajoute une seule déclaration :

1.sarcophage {
2  box-sizing: border-box;
3  width: 200px;
4  padding: 20px;
5}

L'élément mesure maintenant exactement 200px de large, et il reste 160px pour le contenu - le padding s'est logé dans la largeur indiquée au lieu de l'agrandir. De nombreux projets appliquent box-sizing: border-box à tous les éléments, et je te le recommande car le calcul des dimensions devient beaucoup plus simple.

Pratique

Dans l'éditeur ci-dessous, tu compareras deux boîtes de 300px de large, mais avec un padding, une bordure et une marge différents. Un commentaire dans le fichier CSS calcule la place qu'occupe la première, marges comprises - vérifie-le dans les outils de développement (F12), qui affichent le modèle de boîte de chaque élément :

1<!DOCTYPE html>
2<html lang="fr">
3<head>
4    <meta charset="UTF-8">
5    <title>CSS Box Model</title>
6    <link rel="stylesheet" href="style.css">
7</head>
8<body>
9    <h1>Le Box Model en CSS</h1>
10
11    <div class="box-example">
12        <p>Cet élément a : width, padding, border et margin.</p>
13    </div>
14
15    <div class="box-example-2">
16        <p>Compare les dimensions de cette boîte avec la précédente.</p>
17    </div>
18
19    <h2>Les éléments du Box Model :</h2>
20    <ul>
21        <li><strong>Content</strong> - zone de contenu (width x height)</li>
22        <li><strong>Padding</strong> - espacement intérieur</li>
23        <li><strong>Border</strong> - bordure</li>
24        <li><strong>Margin</strong> - espacement extérieur</li>
25    </ul>
26</body>
27</html>

Dans la leçon suivante, tu verras que les boîtes se placent côte à côte ou les unes sous les autres selon la propriété display. Retiens : chaque élément est un sarcophage - la momie du contenu, le rembourrage du padding, les parois dorées de la bordure et l'espace libre de la marge.