← 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