CSS : mettre en forme le Web (école d'ingénieur) · Chapitre 5 · Application directe du cours

Où sont passées les marges ?

Le modèle de boîte · niveau 2

Énoncé

Le <body> contient, dans cet ordre, un <h2>, un <p>, un second <h2> et un paragraphe de classe serre. Les titres mesurent 28 pixels de haut, les paragraphes 18, et le premier titre commence à l'ordonnée 16.


body {
  margin: 16px;
  font-family: system-ui, sans-serif;
}

h2 {
  margin: 0 0 32px;
}

p {
  margin: 16px 0 0;
}

.serre {
  margin-top: -8px;
}

Calculer l'ordonnée du haut de chacun des quatre éléments, en justifiant chaque écart.

Corrigé

Premier <h2> : 16 (donné). Il finit à $16 + 28 = 44$ .
Premier <p> : la marge basse du titre (32) et la marge haute du paragraphe (16) fusionnent en $max (32, 16) = 32$ . Haut à $44 + 32 = 76$ , bas à 94.
Second <h2> : le paragraphe n'a pas de marge basse, le titre pas de marge haute. Haut à 94, bas à 122.
Paragraphe .serre : marges 32 et $- 8$ ; avec une marge négative, on additionne la plus grande positive et la plus négative : $32 - 8 = 24$ . Haut à $122 + 24 = 146$ .

Chromium donne 16, 76, 94 et 146 (code/ch5/exo-fusion.html).

100 % gratuit

La suite du chapitre est sur Adloun

Exercice suivant et tuteur

Sans compte : le cours et le premier QCM. Exercices et tuteur : inscription gratuite en 30 secondes, sans carte bancaire.

Le cours du chapitre · Tous les exercices du chapitre

Exercice suivant et tuteur →