Pourquoi une marge supérieure sur un élément interne déplace-t-elle sa division parent et comment puis-je y remédier ?

Marge supérieure affectant le placement de la division Wrapper

Lors de l'application d'une marge supérieure à l'élément visible initial d'une page, comme une division d'en-tête , cela peut déplacer par inadvertance la division entière. Ceci est le résultat du comportement en cascade par défaut du navigateur.

Pour surmonter ce problème, une solution consiste à implémenter la règle CSS suivante à la division parent :

overflow: auto;

En spécifiant cette règle, la division parent ajustera sa hauteur pour s'adapter à la marge supérieure de l'élément interne, empêchant ainsi la division d'être poussée vers le bas.

Voici un extrait de code mis à jour incorporant ceci solution :

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

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

En implémentant cette technique, la marge supérieure appliquée à l'élément h1 n'affectera plus le positionnement de la division d'en-tête.

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!