Le bandeau qui descend — exercice corrigé de CSS : mettre en forme le Web (école d'ingénieur) (chapitre 5)

Le bandeau qui descend

Le modèle de boîte · niveau 2

Énoncé

Le bandeau de cette page devait être bleu dès le haut de la fenêtre, le titre étant à 40 pixels de son bord. Or une bande blanche de 40 pixels apparaît au-dessus du bandeau.


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

/* Erreur : la marge du h1 « s'échappe » du bandeau */
.bandeau {
  background: #1f3a68;
  color: #fff;
}

h1 {
  margin: 40px 16px;
}

Expliquer le phénomène, puis le corriger de deux façons différentes. Quelle est alors la hauteur du bandeau, le titre mesurant 38 pixels ?

Corrigé

La marge haute du <h1> (40) touche celle du bandeau (0) : rien ne les sépare, ni bordure ni rembourrage. Elles fusionnent en une marge de 40 portée par le bandeau, à l'extérieur : le fond bleu commence à l'ordonnée 40, au ras du titre. Deux corrections :

display: flow-root sur .bandeau : le bandeau contient désormais la marge de son titre ;
remplacer la marge verticale du titre par un rembourrage du bandeau : .bandeau { padding: 40px 16px; } et h1 { margin: 0; }.

Avec la première (code/ch5/exo-bandeau.css) :


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

.bandeau {
  display: flow-root;
  background: #1f3a68;
  color: #fff;
}

h1 {
  margin: 40px 16px;
}

le bandeau commence en 0 et mesure $40 + 38 + 40 = 118$ pixels, ce que Chromium confirme.