Boîtes et espacement · Code avec Martin

Découvre le plus grand secret du CSS : tout sur une page est une boîte. Et apprends à les déplacer.

Montre-moi : tout est une boîte

Voici le plus grand secret du design web : chaque chose sur une page est une boîte rectangulaire. Un titre, un paragraphe, une image, un menu – tout. Une fois que tu apprends à le voir, tout le CSS prend sens.

Chaque boîte a trois types d’espace autour d’elle :

        margin (outer space)
      ┌─────────────────────────┐
      │  border (frame)         │
      │  ┌───────────────────┐  │
      │  │ padding (cushion) │  │
      │  │  ┌─────────────┐  │  │
      │  │  │   CONTENT   │  │  │
      │  │  └─────────────┘  │  │
      │  └───────────────────┘  │
      └─────────────────────────┘

padding – le coussin : espace entre le contenu et le cadre (à l’intérieur de la boîte)
border – le cadre de la boîte
margin – espace entre la boîte et ses voisins (à l’extérieur de la boîte)

.card {
  padding: 16px;        /* cushion on all sides */
  border: 2px solid gray;
  margin: 20px 0;       /* 20px top and bottom, 0 on the sides */
  border-radius: 12px;
}

Montre-moi : une page comme les pros la construisent

Tu as vu ça sur les vrais sites web – le contenu n’est pas étiré sur tout l’écran large, il reste dans une colonne confortable au milieu. Trois lignes de CSS font ça :

main {
  max-width: 700px;   /* content will never be wider than 700px */
  margin: 0 auto;     /* auto on the sides = center it */
  padding: 0 16px;     /* on mobile, text won't be glued to the edge */
}

margin: 0 auto est une formule magique : zéro en haut et en bas, « automatiquement égal » sur les côtés – donc centré. Presque tous les sites web au monde utilisent cette règle.

Et domptons aussi les images, pour qu’elles ne débordent jamais de la page :

img {
  max-width: 100%;      /* never wider than the column */
  height: auto;         /* height adjusts automatically, so the photo doesn't squish */
  border-radius: 12px;  /* rounded corners suit every photo */
}

À toi 💪

Cette tâche est la même pour chaque projet – c’est une tenue universelle pour n’importe quel site web :

Centre ton contenu : la règle max-width + margin: 0 auto sur main.
Dompte tes images avec la règle img de l’exemple.
Améliore ton badge de la dernière leçon : ajoute margin pour qu’il ait de l’air.
Laisse la page respirer : ajoute body { line-height: 1.6; } – les lignes de texte s’espacent joliment.

Solution complète (fonctionne pour chaque projet)

Ajoute ceci à style.css :

body {
  line-height: 1.6;
}

main {
  max-width: 700px;
  margin: 0 auto;
  padding: 0 16px;
}

img {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
}

Et à ton badge (le tien pourrait s’appeler .news, .favorite, .tip, ou .win), ajoute cette ligne :

  margin: 20px 0;

💡

Essaie de rendre les boîtes visibles ! Ajoute cette règle à ton CSS un moment : * { border: 1px solid red; } – l’astérisque signifie « absolument tout ». Soudain tu verras chaque boîte sur la page. Puis supprime-la, mais retiens cette vue : c’est comme ça que le navigateur voit ta page.

✅

Vérifie : Ton contenu est dans une colonne centrée confortable, les photos ont des coins arrondis et ne débordent nulle part, le texte est facile à lire. Réduis la fenêtre de ton navigateur – le contenu s’adapte. Ton site web a soudain l’air d’une classe au-dessus.

Ce que tu retiens de cette leçon

Tout sur une page est une boîte avec padding (dedans), border (cadre) et margin (dehors).
max-width + margin: 0 auto = une colonne de contenu centrée, comme les vrais sites web.
img { max-width: 100%; } – les photos ne débordent jamais.