Pourquoi une marge supérieure sur un élément enfant fait-elle baisser sa division parent ?

La marge supérieure pousse la division parent vers le bas : comprendre et résoudre le problème

De nombreux développeurs rencontrent un problème particulier lors de l'application d'une marge supérieure au premier élément visible sur une page : il provoque le déplacement du div parent vers le bas. Pour approfondir la cause de ce comportement et proposer une solution, analysons l'extrait de code fourni :

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

div#header h1 {
  text-align: center;
  width: 375px;
  height: 50px;
  margin: 50px auto;
  font-size: 220%;
  background: url('../../images/name_logo.png') no-repeat;
}

Ce code définit un en-tête div avec un élément h1 imbriqué contenant une marge de 50 px. En règle générale, nous nous attendons à ce que cette marge augmente l'espace entre le h1 et le bord supérieur du div d'en-tête. Cependant, cela entraîne à la place une diminution de 50 pixels de l'ensemble de l'en-tête div.

Pour comprendre pourquoi cela se produit, nous devons considérer le "contexte de formatage de bloc". Lorsqu'elle est appliquée au premier élément visible d'une page, une marge supérieure réinitialise le contexte de formatage du bloc, provoquant le retrait du div parent.

Une solution à ce problème consiste à appliquer overflow: auto au div parent. . Cela permet au div parent d'ajuster automatiquement sa hauteur pour accueillir ses éléments enfants, y compris le h1 avec la marge supérieure :

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

En ajoutant overflow: auto, nous permettons au div d'en-tête de se redimensionner verticalement, l'empêchant d'être poussé vers le bas lorsque la marge supérieure est ajoutée à l'élément h1.

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!