Front-end · 6 mondes · 18 étapes

HTML & CSS

Structurer et styliser une page web, directement dans le navigateur.

Progression

0 %

0/18 étapes terminées

← Décryptages

Fondamental · 8 min de lecture

Le modèle de boîte

La clé de tous les problèmes d'espacement

1Définition

Chaque élément est une boîte à quatre couches : contenu, padding, bordure, marge. box-sizing: border-box fait tenir padding et bordure dans la largeur annoncée, ce qui rend les dimensions prévisibles.

2Principes fondamentaux

Padding dedans, marge dehors

Le padding agrandit la zone peinte ; la marge éloigne les voisins et reste transparente.

border-box partout

* { box-sizing: border-box; } est la première ligne de presque tous les projets.

max-width plutôt que width

Plafonner sans imposer : la boîte s'adapte aux petits écrans au lieu de déborder.

gap plutôt que des marges

Dans un conteneur flex ou grid, gap espace les enfants sans toucher aux bords.

3Exemples pratiques

Le calcul qui piège

Exemple

1.boite {2  width: 200px;3  padding: 20px;4  border: 2px solid;5}6/* sans border-box : 244 px de large */7/* avec border-box : 200 px, le contenu rétrécit */

Le calcul par défaut surprend tout le monde une fois. border-box le supprime pour toujours.

Centrer un conteneur

Exemple

1.page {2  max-width: 640px;3  margin: 0 auto;4  padding: 0 16px;5}

La largeur plafonnée, les marges automatiques qui partagent le reste, et un padding pour que le texte ne touche jamais les bords sur téléphone.

4Erreurs courantes

Espacer avec des br

À éviter

<p>Texte</p><br><br>

À faire

p { margin-bottom: 24px; }

Pourquoi : L'espacement est une affaire de style : dans le HTML, il devient impossible à ajuster globalement.

Largeur fixe sur un conteneur

À éviter

.page { width: 960px; }

À faire

.page { max-width: 960px; }

Pourquoi : Sur un téléphone de 375 px, la page déborde et crée un défilement horizontal.

Marges qui fusionnent

À éviter

/* 24 px en bas du h2 et 24 px en haut du p : 48 px attendus */

À faire

/* 24 px obtenus : les marges verticales voisines fusionnent */

Pourquoi : La fusion des marges verticales est une règle du flux normal. Flex et grid ne la connaissent pas, et gap l'évite.

5Subtilités à connaître

◆Les marges verticales de deux blocs voisins fusionnent : la plus grande l'emporte au lieu de s'additionner.
◆margin: auto ne centre verticalement qu'à l'intérieur d'un conteneur flex ou grid.
◆overflow: hidden coupe ce qui dépasse, mais masque aussi les contours de focus des enfants : à utiliser avec prudence.

6Vérifie ta compréhension

Question 1/3

Score 0

Quelle couche est peinte par le fond ?

Envie d'essayer ? Ouvre le Labo et recopie les exemples pour les modifier.