📦 Le cours : tout est une boîte
Pour le navigateur, tout est une boîte rectangulaire : un paragraphe, un lien, une image. Comprendre cette boîte explique pourquoi un élément est plus large que prévu, pourquoi deux marges ne s'additionnent pas ou pourquoi un fond semble dépasser.
Les quatre couches
┌────────────────────── margin ──────────────────────┐
│ │
│ ┌────────────────── border ──────────────────┐ │
│ │ │ │
│ │ ┌───────────── padding ──────────────┐ │ │
│ │ │ │ │ │
│ │ │ │ │ │
│ │ │ contenu (width × height) │ │ │
│ │ │ │ │ │
│ │ │ │ │ │
│ │ └────────────────────────────────────┘ │ │
│ │ │ │
│ └────────────────────────────────────────────┘ │
│ │
└────────────────────────────────────────────────────┘
- Contenu : le texte ou l'image elle-même.
- Padding : de l'air autour du contenu, à l'intérieur de la boîte ; la couleur de fond s'y étend.
- Border : le contour.
- Margin : de l'espace à l'extérieur, qui écarte la boîte de ses voisines ; toujours transparent.
Dans les outils de développement (F12), l'onglet « Éléments » dessine ce schéma coloré pour l'élément sélectionné, avec toutes les dimensions : c'est le meilleur moyen de comprendre un décalage.
width, height et box-sizing
Par défaut (content-box), width ne mesure que le contenu : le padding et la bordure s'y ajoutent, ce qui surprend. Avec box-sizing: border-box, width mesure la boîte complète (contenu, padding et bordure). Toutes les feuilles de style modernes commencent par ce réglage.
Pour width: 300px; padding: 16px; border: 2px solid | Largeur totale occupée |
|---|
box-sizing: content-box (défaut) | 300 + 2 × 16 + 2 × 2 = 336 px |
box-sizing: border-box | 300 px |
*,
*::before,
*::after {
box-sizing: border-box;
}
min-width, max-width, min-height et max-height bornent les dimensions : max-width: 100% empêche une image de dépasser son conteneur.
Les bordures
border est un raccourci pour trois propriétés : l'épaisseur (border-width), le style (border-style : solid, dashed, dotted, double, none) et la couleur (border-color). Sans style, aucune bordure n'apparaît. On peut cibler un côté (border-bottom) et arrondir les coins avec border-radius ; 50% sur un carré donne un cercle.
.pointille {
border: 2px dashed #0f766e;
}
.souligne {
border-bottom: 3px solid #ef4a34;
}
.rond {
width: 80px;
height: 80px;
border-radius: 50%;
background: #2563eb;
}
RenduUn cadre en pointillés verts, un élément souligné d'un trait rouge épais, un disque bleu de 80 pixels.
Marges : fusion et centrage
Les marges verticales de deux blocs voisins ne s'additionnent pas : elles fusionnent et la plus grande l'emporte (deux paragraphes de margin: 20px 0 sont écartés de 20 px, pas de 40). Les marges horizontales, elles, s'additionnent. Pour centrer un bloc horizontalement, donne-lui une largeur et mets des marges latérales automatiques : margin: 0 auto. Sans largeur, un bloc occupe déjà toute la ligne et auto n'a rien à répartir.
.page {
max-width: 60rem;
margin: 0 auto;
padding: 0 1rem;
}
display : comment la boîte se comporte
| Valeur | Comportement |
|---|
block | occupe toute la largeur, commence sur une nouvelle ligne ; width, height et marges s'appliquent (div, p, h1) |
inline | reste dans la ligne de texte ; width, height et marges verticales sont ignorés (span, a, strong) |
inline-block | reste dans la ligne mais accepte width, height et marges (boutons, étiquettes) |
none | l'élément disparaît de la page et ne laisse aucune place (visibility: hidden le cache en gardant la place) |
flex, grid | dispositions modernes (voir Flexbox et Grid) |
Ombres, contours et débordement
box-shadow: décalage-x décalage-y flou couleur ajoute une ombre qui ne prend aucune place. outline dessine un contour hors de la boîte, sans changer sa taille (c'est le contour du focus). overflow règle ce qui se passe quand le contenu dépasse : visible (par défaut), hidden (coupé), auto (barres de défilement si besoin), scroll.
.carte {
box-shadow: 0 4px 12px rgb(0 0 0 / 15%);
}
.zone {
max-height: 12rem;
overflow: auto;
}
