Exercice 2 : Box Model

2.1 Comprendre le Box Model

box-sizing: content-box
width: 300px + padding: 20px×2 + border: 5px×2
Largeur totale = 350px

content-box : largeur totale = 300 + 40 + 10 = 350px

box-sizing: border-box
width: 300px (tout inclus)
Largeur totale = 300px

border-box : largeur totale = 300px (padding et border inclus)

Reset CSS universel

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

2.2 Centrer un élément

Centrage horizontal (margin: 0 auto) :

Je suis centré horizontalement

Centrage horizontal ET vertical (Flexbox) :

Je suis centré dans les deux axes

/* Centrage horizontal */
.element {
  width: 600px;
  margin: 0 auto;
}

/* Centrage horizontal + vertical */
.parent {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}