CSS : mettre en forme le Web (école d'ingénieur) · Chapitre 5 · Application directe du cours
Centrer un article
Le modèle de boîte · niveau 1 (application)
Énoncé
On veut une colonne d'article d'au plus 40 rem (la racine est à 16 pixels), centrée dans la fenêtre, avec 1 rem de rembourrage à gauche et à droite pour que le texte ne touche jamais les bords d'un téléphone.
- Écrire la règle
.article. - À quelle abscisse commence l'article dans une fenêtre de 1000 pixels ? De 400 pixels ?
- Pourquoi ne pas écrire
width: 40rem?
Corrigé
- Avec la remise à zéro
border-box:
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
margin: 0;
font-family: system-ui, sans-serif;
}
.article {
max-width: 40rem;
padding: 0 1rem;
margin: 0 auto;
}- 40 rem font 640 pixels, rembourrage compris. Dans 1000 pixels, il reste 360 pixels, 180 de chaque côté : l'article commence à 180 (vérifié dans Chromium). Dans 400 pixels, la largeur maximale n'est pas atteinte : l'article mesure 400 et commence à 0 ; c'est le rembourrage qui éloigne le texte du bord.
- Avec
width: 40rem, l'article garderait 640 pixels dans une fenêtre de 400 : il déborderait et ferait défiler la page horizontalement.
100 % gratuit
La suite du chapitre est sur Adloun
- 10 autres exercices corrigés dans ce chapitre
- Les 2 QCM du chapitre, le premier sans compte
- Le tuteur, qui guide pas à pas sans donner la réponse
Sans compte : le cours et le premier QCM. Exercices et tuteur : inscription gratuite en 30 secondes, sans carte bancaire.