CSS : mettre en forme le Web (école d'ingénieur) · Chapitre 4 · Application directe du cours
Un titre qui se chevauche
Couleurs, unités et typographie · niveau 2
Énoncé
body {
font-family: system-ui, sans-serif;
font-size: 16px;
line-height: 24px;
}
h1 {
font-family: Georgia, serif;
font-size: 40px;
color: #1f3a68;
}Le titre, qui tient sur deux lignes, a ses lignes qui se chevauchent. Expliquer en calculant l'interlignage du titre, puis corriger la feuille (en passant aussi les tailles en rem).
Corrigé
line-height: 24px est hérité tel quel par le titre. Ses lettres mesurent 40 pixels, ses lignes 24 : chaque ligne déborde de 16 pixels sur la suivante. Dans Chromium (fenêtre de 600 pixels), le titre fait deux lignes pour une hauteur de pixels.
Correction : interlignage sans unité, et un interlignage propre aux titres.
body {
font-family: system-ui, sans-serif;
font-size: 1rem;
line-height: 1.5;
}
h1 {
font-family: Georgia, serif;
font-size: 2.5rem;
line-height: 1.2;
color: #1f3a68;
}Le titre a maintenant des lignes de pixels, soit 96 pixels pour deux lignes (valeurs vérifiées dans Chromium).
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.