← Retour au menu
Exercice 2 – Box Model
2.1 Comprendre le Box Model
/* Avec box-sizing: content-box (défaut), quelle est la largeur totale visible de .box ? */
La largeur totale visible est de : 300px (width) + 40px (padding) + 10px (border) = 350px.
/* Avec box-sizing: border-box, quelle est la largeur totale visible ? */
La largeur totale visible est de : 300px.
/* Écrivez le reset CSS universel pour box-sizing */
*, *::before, *::after {
box-sizing: border-box;
}
2.2 Centrer un élément
/* Centrez horizontalement un élément <div class="element"> de 600px de large, puis centrez-le aussi
verticalement dans la page. */
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.element {
width: 600px;
}
DÉMONSTRATION
Div centrée verticalement et horizontalement