Pourquoi l'ajout d'une marge supérieure à un en-tête pousse-t-il l'intégralité de l'en-tête vers le bas ?

Problème de marge supérieure dans l'élément d'en-tête

Lors de l'ajout d'une marge supérieure à un div d'en-tête, pourquoi l'ensemble du div d'en-tête est-il poussé vers le bas ?

Ce comportement se produit car une marge supérieure appliquée au premier élément visible dans un conteneur l'amène souvent à s'étendre au-delà de l'espace disponible de son élément parent. En conséquence, l'élément parent s'agrandit verticalement pour s'adapter à l'espace de marge, poussant tous les éléments suivants vers le bas.

Exemple d'extrait de code :

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;
}

Solution :

Pour résoudre ce problème, vous pouvez ajouter la propriété overflow:auto au div parent. Cela fera défiler le div parent lorsque la marge s'étend au-delà de son espace disponible, empêchant le div d'en-tête de se déplacer vers le bas.

div#header {
  overflow: auto;
  ...
}

Pour plus de détails, reportez-vous au lien suivant :

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!