7.1 — Spacing & sizing

⏱️ TL;DR — L’espacement suit la formule {propriété}{côté}-{taille} : m (margin) / p (padding), côté t/b/s/e/x/y ou rien, taille 0–5 ou auto. Ex. mt-3, px-4, my-auto. Le dimensionnement : w-25/50/75/100/auto, h-*, mw-100, vh-100. Tout est responsive (p-md-5).

🎯 Objectifs

• Maîtriser la formule d’espacement.
• Utiliser marges auto pour centrer.
• Dimensionner en pourcentage et viewport.

L’échelle d’espacement

La formule

m | p          → margin | padding
t b s e x y ∅  → top, bottom, start, end, axe X, axe Y, tous
0..5 | auto    → taille

Exemples :

<div class="mt-3">margin-top 1rem</div>
<div class="px-4">padding gauche+droite 1.5rem</div>
<div class="my-5">margin haut+bas 3rem</div>
<div class="p-0">aucun padding</div>
<div class="mx-auto" style="width:200px">centré horizontalement</div>

• s = start (gauche en LTR), e = end (droite) — pensés pour le RTL.
• Marges négatives : mt-n3 (utile pour chevaucher).
• Responsive : p-3 p-md-5 (3 par défaut, 5 dès md).

Centrer avec les marges

<div class="mx-auto" style="max-width: 400px">Bloc centré</div>
<div class="d-flex"><div class="ms-auto">Poussé à droite</div></div>

Sizing (dimensions)

<div class="w-25">25 %</div>
<div class="w-50">50 %</div>
<div class="w-100">100 %</div>
<div class="h-100">hauteur 100 % du parent</div>
<img class="mw-100" src="…">        <!-- max-width 100% -->
<div class="vh-100">hauteur = viewport</div>
<div class="min-vh-100">au moins la hauteur du viewport</div>

Largeurs : w-25/50/75/100/auto. Hauteurs : h-25/50/75/100/auto. Viewport : vw-100, vh-100, min-vw-100, min-vh-100.

⚠️ Piège — h-100 ne fonctionne que si le parent a une hauteur définie. Sur une page « normale », h-100 sur un enfant du body ne donne pas la hauteur de l’écran — utilisez vh-100 ou min-vh-100.

💡 Pour un dev React — Si vous venez de Tailwind, l’échelle est proche mais plus courte (0–5 au lieu de 0–96) et en rem. mt-3 de Bootstrap ≈ mt-4 de Tailwind (1rem). Ne cherchez pas d’équivalent 1:1, retenez l’échelle 0–5.

✏️ Exercices

1. Centrer horizontalement un bloc de 300px de large.

2. Une section qui occupe au moins toute la hauteur de l’écran.

🧠 Quiz de révision

Chapitre suivant : 7.2 — Couleurs (texte & fond)