02 — Box Model

2.1 — Calculs

CSS de référence

.box { width: 300px; padding: 20px; border: 5px solid #333; margin: 15px; }

content-box (défaut) → largeur visible ?

300 + 20×2 + 5×2 = 350px

border-box → largeur visible ?

300px (padding + border inclus dans la width)

Reset universel box-sizing

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

content-box — largeur totale : 350px

contenu 300px

border-box — largeur totale : 300px

contenu 250px

Horizontal seulement

.box {
  width: 600px;
  margin: 0 auto;
}

Horizontal + vertical (Flexbox)

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

Horizontal + vertical (Grid)

body {
  display: grid;
  place-items: center;
  min-height: 100vh;
}

Centré !