Box model, display et position en CSS

En CSS, chaque élément est une boîte rectangulaire faite de quatre zones emboîtées : le contenu, la marge intérieure (padding), la bordure (border) et la marge extérieure (margin) ; c'est le modèle de boîte, ou box model. Ce chapitre explique comment se calcule la taille d'une boîte, la différence entre margin et padding, la propriété display, le positionnement avec position et z-index, et les façons de centrer un élément.

Les quatre zones d'une boîte

La différence entre margin et padding, la question la plus posée sur ce chapitre, tient dans la colonne « Fond » : le padding agrandit la boîte de l'intérieur, sous son fond et sa zone cliquable ; la margin écarte la boîte des autres, à l'extérieur. Pour aérer le texte d'un bouton, c'est du padding (la zone cliquable grandit) ; pour éloigner deux cartes, de la margin (ou mieux, gap, chapitre 9).

Dans l'inspecteur, l'onglet Mise en page (Layout ou Computed) dessine ces quatre zones avec leurs valeurs, et le survol d'un élément les colore dans la page : c'est le moyen le plus rapide de comprendre un espace inattendu.

Calculer la taille d'une boîte : content-box et border-box

.carte {
  width: 300px;
  padding: 20px;
  border: 2px solid #0f766e;
  margin: 16px;
}

Quelle largeur fait la carte à l'écran ? Par défaut (box-sizing: content-box), width ne fixe que le contenu. Le padding et la bordure s'ajoutent :

• largeur visible : 300 + 2 × 20 + 2 × 2 = 344 px ;
• largeur occupée dans la page, marges comprises : 344 + 2 × 16 = 376 px.

Ce mode de calcul surprend tout le monde : tu déclares 300 px, tu obtiens 344. Deux colonnes à width: 50% avec un padding débordent et passent l'une sous l'autre. La propriété box-sizing: border-box change la règle : width inclut alors le padding et la bordure.

.carte {
  box-sizing: border-box;
  width: 300px;        /* la boîte visible fait 300 px */
  padding: 20px;       /* le contenu se réduit à 300 − 40 − 4 = 256 px */
  border: 2px solid #0f766e;
}

Presque tous les sites commencent donc leur feuille de style par :

*,
*::before,
*::after {
  box-sizing: border-box;
}

margin, padding et border : les raccourcis

margin et padding acceptent une à quatre valeurs, dans le sens des aiguilles d'une montre en partant du haut :

Les propriétés détaillées existent aussi : margin-top, padding-left… et leurs équivalents logiques margin-block-start, padding-inline (chapitre 11).

Quelques valeurs particulières :

• margin: 0 auto; centre horizontalement un bloc qui a une largeur (width ou max-width) : les marges gauche et droite se partagent l'espace libre ;
• une marge négative rapproche ou fait chevaucher les boîtes ; un padding ne peut pas être négatif.

.bordure-exemples {
  border: 2px solid #0f766e;          /* épaisseur, style, couleur */
  border-bottom: 4px dashed #94a3b8;  /* un seul côté */
  border-radius: 8px;                 /* coins arrondis ; 50% sur un carré donne un cercle */
  box-shadow: 0 2px 8px rgb(0 0 0 / 15%); /* décalage x, y, flou, couleur */
  outline: 3px solid #1d4ed8;         /* contour hors boîte : ne prend pas de place */
}

outline ressemble à une bordure, mais ne compte pas dans la taille de la boîte et ne décale rien : c'est pour ça qu'on l'utilise pour l'indicateur de focus.

La fusion des marges

Quand deux marges verticales se touchent, elles ne s'additionnent pas : elles fusionnent, et seule la plus grande reste.

h2 { margin-bottom: 24px; }
p  { margin-top: 16px; }

Entre un <h2> et le <p> qui le suit, l'espace est de 24 px, pas de 40. La fusion se produit aussi entre un parent et son premier ou dernier enfant, si rien ne les sépare (ni bordure, ni padding) : la marge haute du premier <h2> d'une carte « sort » alors de la carte.

Elle ne se produit pas pour les marges horizontales, ni entre les éléments d'un conteneur Flexbox ou Grid. Beaucoup de développeurs évitent le problème en ne mettant que des marges basses (margin-bottom), ou en espaçant les éléments avec gap.

Largeur, hauteur et débordement

.contenu {
  max-width: 70rem;
  margin: 0 auto;            /* centré, jamais plus large que 70rem */
  padding: 0 1rem;           /* de l'air sur les petits écrans */
}

.tableau-large {
  overflow-x: auto;          /* un grand tableau défile dans son cadre sur mobile */
}

.titre-carte {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;   /* « Initiation à l'ordinat… » */
}

La propriété display

display décide comment une boîte se place par rapport aux autres.

/* Des liens de menu cliquables sur toute leur surface */
nav a {
  display: inline-block;
  padding: 0.75rem 1rem;
}

Sans inline-block, le padding vertical d'un lien en ligne déborderait sur les lignes voisines sans agrandir la zone de la ligne : le lien paraîtrait plus haut, mais les autres lignes ne s'écarteraient pas.

Trois façons de cacher un élément, qui ne font pas la même chose :

/* Masqué à l'écran, mais lu par les lecteurs d'écran */
.visuellement-masque {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

Cette classe sert par exemple à donner un titre <h2> « Menu principal » que seuls les lecteurs d'écran entendent, ou à compléter un lien « Lire la suite » avec la fin cachée « de l'article sur le club lecture ».

La propriété position

position sort un élément du placement normal (le « flux ») pour le placer avec top, right, bottom, left.

Le motif le plus courant, un badge posé sur une carte :

.carte {
  position: relative;      /* la carte devient la référence */
}

.badge-complet {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;           /* en haut à droite de la carte, pas de la page */
}

header {
  position: sticky;
  top: 0;                  /* se colle en haut de la fenêtre au défilement */
  z-index: 10;
  background-color: white; /* sinon le contenu se voit à travers */
}

N'utilise pas position: absolute pour construire une mise en page entière (colonnes, grille de cartes) : le contenu ne pousse plus rien, et tout se chevauche dès que le texte s'allonge ou que l'écran rétrécit. La mise en page, c'est Flexbox et Grid.

z-index et superposition

Quand des éléments positionnés se chevauchent, z-index décide lequel passe devant : la valeur la plus grande est au-dessus. Il ne s'applique qu'aux éléments positionnés (position autre que static) et aux enfants de conteneurs Flexbox et Grid.

.menu-deroulant { position: absolute; z-index: 20; }
header          { position: sticky;   z-index: 10; }

Le piège : z-index agit à l'intérieur d'un contexte d'empilement. Un élément qui a un z-index (et une position), une opacity inférieure à 1 ou un transform crée un nouveau contexte : ses enfants ne peuvent pas passer au-dessus d'un élément extérieur plus haut que lui, même avec z-index: 9999. Si un z-index « ne marche pas », remonte les ancêtres dans l'inspecteur et cherche celui qui crée le contexte.

Centrer un élément en CSS

/* Un message centré au milieu d'une zone de 60 % de la hauteur de la fenêtre */
.zone-vide {
  min-height: 60dvh;
  display: grid;
  place-items: center;
}

Le centrage vertical demande que le parent ait une hauteur plus grande que l'enfant : un bloc qui a la hauteur de son contenu n'a rien à centrer.

Exercices

.encart {
  width: 400px;
  padding: 10px 30px;
  border: 5px solid #0f766e;
  margin: 20px auto;
}

<article class="carte">
  <p class="badge">Complet</p>
  <h3>Initiation à l'ordinateur</h3>
  <p>Mercredi 3 juin, 10 h</p>
</article>

.carte {
  position: relative;           /* référence du badge */
  padding: 1rem;
  border: 1px solid #64748b;
  border-radius: 8px;
}

.badge {
  position: absolute;
  top: 8px;
  right: 8px;
  margin: 0;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  background-color: #b91c1c;
  color: white;
  font-size: 0.875rem;
  font-weight: 700;
}