Pourquoi ma marge supérieure abaisse-t-elle la division parent et comment « overflow : auto » peut-il m'aider ?

Comprendre le problème de la marge supérieure

En CSS, l'ajout d'une marge supérieure au premier élément enfant peut parfois pousser le div contenant vers le bas. Cela se produit car le navigateur réduit automatiquement les valeurs de marge adjacentes dans les directions verticales.

Solution : Overflow:auto

Pour résoudre ce problème, une solution efficace consiste à ajouter la propriété overflow : automatique vers le div parent. Cela oblige le conteneur parent à ajuster automatiquement sa hauteur pour s'adapter à la marge sans affecter la position des frères et sœurs.

Exemple :

div#header {
  width: 100%;
  background-color: #eee;
  position: relative;
  overflow: auto;
}

En implémentant cette solution, le

la marge dans l'extrait fourni ne fera plus baisser le #header div. Pour plus d'informations, reportez-vous au lien fourni.

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!