Exercice 2 - Box Model

2.1 Comprendre le Box Model

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

• content-box (défaut) : largeur visible = 300 + 40 + 10 = 350px
• border-box : largeur visible = 300px

Reset universel box-sizing

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

2.2 Centrer un élément

Exemple de centrage horizontal (bloc de 600px) puis vertical + horizontal dans la page :

.center-horizontal {
  width: 600px;
  margin: 0 auto;
}

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