Pourquoi mon en-tête fixe semble-t-il avoir une marge supérieure supplémentaire ?

Pourquoi mon en-tête descend-il lorsque je le fixe ?

Dans votre Codepen, vous définissez l'en-tête comme étant fixe, ce qui signifie qu'il restera dans le même position tout en faisant défiler vers le bas. Cependant, lorsque vous faisiez cela, la marge en haut de l’en-tête semblait augmenter. Ceci est dû à l'effondrement des marges.

Qu'est-ce que l'effondrement des marges ?

L'effondrement des marges est un comportement CSS qui réduit les marges des éléments adjacents au niveau du bloc, tels que votre en-tête et le formulaire en dessous. Lorsque l'en-tête devient fixe, il est supprimé du flux du document et le formulaire devient le premier élément entrant. Cela provoque l'effondrement de la marge supérieure du formulaire avec la marge supérieure du corps, ce qui entraîne l'apparition d'une marge plus grande.

Comment résoudre le problème

Il existe deux façons courantes de gérer ce problème : en désactivant la réduction de la marge ou en définissant une valeur de marge supérieure pour l'élément qui en a besoin.

Désactiver la réduction de la marge

Pour désactiver la marge en s'effondrant, ajoutez la règle CSS padding-top: 1px à l'élément body. Cela oblige le navigateur à conserver la marge supérieure du corps.

body {
  padding-top: 1px; /* Disable margin-collapsing */
}

Définition d'une valeur de marge supérieure

Vous pouvez également ajouter une marge supérieure à l'en-tête. Cela définira la distance entre l'en-tête et le haut de la fenêtre :

#header {
  margin-top: 2rem;
}

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!