Le modèle de boîte

La règle fondamentale du CSS

Un secret que peu de débutants savent au début : chaque élément HTML est une boîte rectangulaire. Chaque paragraphe, titre, image, bouton — tout est une boîte.

Ces boîtes ont une structure précise avec 4 couches. Comprendre ces 4 couches, c'est éviter 80% des bugs d'espacement.

Les 4 couches du modèle de boîte

Pense à un oignon avec plusieurs couches. De l'intérieur vers l'extérieur :

1. Content (contenu) — le centre. Le texte, l'image, ce qui est réellement affiché. Sa taille est contrôlée par width et height.
2. Padding (rembourrage intérieur) — l'espace entre le contenu et la bordure. Contrôlé par la propriété padding.
3. Border (bordure) — le contour de l'élément. Contrôlé par la propriété border.
4. Margin (marge extérieure) — l'espace entre la bordure et les éléments voisins. Contrôlé par la propriété margin.

Le piège avec width par défaut

Voici le piège le plus courant pour les débutants. Regarde ce code :

.boite {
  width: 300px;    /* tu veux une boîte de 300px */
  padding: 20px;  /* tu ajoutes 20px de rembourrage de chaque côté */
  border: 2px solid #ccc; /* et une bordure de 2px */

  /* Taille réelle = 300 + 20 + 20 + 2 + 2 = 344px ! Pas 300px ! */
}

Par défaut, width ne contrôle que la taille du contenu. Le padding et la bordure s'ajoutent en dehors. Ta boîte fait donc 344px, pas 300px.

C'est contre-intuitif. Tu écris 300px, tu veux 300px. Pas 344.

La solution : box-sizing border-box

Avec box-sizing: border-box, width inclut le padding et la bordure. La taille totale est exactement ce que tu as écrit.

/* Colle ces 3 lignes tout en haut de TOUS tes fichiers CSS */
/* Le sélecteur * cible tous les éléments de la page */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.boite {
  width: 300px;   /* Maintenant, ça fait exactement 300px */
  padding: 20px; /* Le padding est inclus dans les 300px */
  border: 2px solid #ccc; /* La bordure aussi */
}

Ce que font ces 3 lignes :

• box-sizing: border-box — la taille inclut padding et border. Fini les surprises.
• margin: 0 — supprime les marges par défaut du navigateur.
• padding: 0 — supprime les paddings par défaut.

Éléments block vs inline

Tous les éléments HTML ne se comportent pas pareil. Il y a deux comportements principaux.

Les éléments block

Un élément block prend toute la largeur disponible. Il occupe toute une ligne. Ce qui suit passe en dessous. On peut lui donner une largeur et une hauteur.

Exemples : <div>, <p>, <h1>, <ul>, <header>, <section>.

Les éléments inline

Un élément inline prend juste la place de son contenu. Il s'intègre dans le texte sans sauter de ligne. On ne peut pas lui donner de largeur ni de hauteur.

Exemples : <span>, <a>, <strong>, <em>, <img>.

/* Rendre un lien (inline) en block — utile pour les menus */
a { display: block; }

/* Rendre un div (block) en inline */
div { display: inline; }

/* Inline-block : s'insère dans le texte MAIS accepte width/height */
span { display: inline-block; width: 100px; }

/* display: none — cache complètement l'élément (il disparaît) */
.cache { display: none; }