Module 8 : Le modèle de boîte

Règle n°1 du CSS : tout est une boîte

Regarde la page que tu as sous les yeux. Le titre, ce paragraphe, le bouton en bas, l'image du club photo : pour le navigateur, ce ne sont pas des mots ni des dessins.

Ce sont des boîtes. Rectangulaires, empilées, imbriquées les unes dans les autres. Toutes. Sans exception.

Ça peut paraître froid, mais c'est une excellente nouvelle : à partir du moment où tu sais régler une boîte, tu sais régler toute la page. Et une boîte n'a que quatre réglages.

Les quatre couches

De l'intérieur vers l'extérieur, toujours dans cet ordre :

1. Le contenu — ton texte, ton image. Le cœur de la boîte.
2. Le padding — l'air entre le contenu et le bord. Sans lui, le texte colle au cadre comme un passager collé à la vitre.
3. La border — le trait qui ferme la boîte. Visible ou non, elle prend de la place.
4. La margin — l'espace autour de la boîte, qui la sépare de ses voisines.

Retiens la paire qui compte : padding = dedans, margin = dehors. Tout le module tourne autour de cette distinction, et c'est la première chose que tu confondras. Le repère infaillible : peins le fond de ta boîte en couleur. Le fond s'arrête à la bordure. Ce qui reste blanc au-delà, c'est la marge.

Le piège qui fait rager tout le monde

Tu écris une carte de 300 pixels de large. Tu lui ajoutes 20 pixels de padding pour aérer, 2 pixels de bordure pour la dessiner. Combien mesure-t-elle à l'écran ?

Pas 300.

300  (le contenu)
+ 20 + 20  (le padding, à gauche et à droite)
+  2 +  2  (la bordure, des deux côtés)
= 344 pixels

Ta carte déborde de sa colonne, et rien dans ton code ne dit « 344 ». C'est le comportement d'origine du CSS, celui de 1996, et il a fait perdre plus d'heures aux développeurs que n'importe quel autre détail du langage.

La bonne nouvelle : une seule ligne le corrige, box-sizing: border-box. Tu la découvriras à l'exercice 6.4 — c'est le cœur du module, celui qu'il faut vraiment comprendre.

Ouvre le capot : F12

Au module 6, tu as mené l'enquête dans le panneau Styles. Cette fois, on ouvre un autre onglet de l'inspecteur.

Appuie sur F12 dans ton navigateur — ou fais un clic droit sur n'importe quel élément, puis « Inspecter ». Un panneau s'ouvre, et parmi les onglets se cache un petit schéma : exactement les quatre couches ci-dessus, avec les vrais chiffres de l'élément que tu as cliqué.

C'est ta machine à rayons X. Elle sert tous les jours, chez les professionnels comme chez toi :

• Ton texte est trop collé au bord ? Le schéma te dit si le padding vaut 0.
• Deux blocs sont trop serrés ? Il te donne la margin exacte, en pixels.
• Ta carte déborde ? Il affiche sa largeur réelle, celle que le CSS ne dit nulle part.

Ce réflexe vaut de l'or : avant de deviner une valeur, va la lire. Essaie tout de suite, sur n'importe quel site — F12, clique un titre, regarde le schéma. Tu ne verras plus jamais une page de la même façon.

Au programme

Six exercices, et les cartes du club photo prennent enfin une vraie allure :

1. padding — de l'air à l'intérieur
2. border — un cadre, et des coins arrondis pour le plaisir
3. margin — de l'espace entre les cartes
4. box-sizing — la carte qui déborde, et la ligne qui répare
5. Les raccourcis — deux valeurs au lieu de quatre, et le centrage des pros
6. Le défi : les trois cartes du club photo, de A à Z

Prêt ?

Ta galerie attend depuis le module 2. Elle va enfin respirer. C'est parti !