Warum verschiebt ein oberer Rand eines inneren Elements dessen übergeordnetes Div und wie kann ich das beheben?

Rand-Top-Auswirkungen auf Wrapper-Div-Platzierung

Beim Anwenden eines oberen Randes auf das erste sichtbare Element auf einer Seite, z. B. eine Kopfzeilenunterteilung , es kann unbeabsichtigt die gesamte Abteilung verdrängen. Dies ist das Ergebnis des standardmäßigen kaskadierenden Verhaltens des Browsers.

Um dieses Problem zu lösen, besteht eine Lösung darin, die folgende CSS-Regel in die übergeordnete Abteilung zu implementieren:

overflow: auto;

Durch Angabe dieser Regel Die übergeordnete Unterteilung passt ihre Höhe an den oberen Rand des inneren Elements an und verhindert so, dass die Unterteilung nach unten gedrückt wird.

Hier ist ein aktualisierter Codeausschnitt, der Folgendes enthält: diese Lösung:

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

Durch die Implementierung dieser Technik hat der auf das h1-Element angewendete obere Rand keinen Einfluss mehr auf die Positionierung der Kopfzeile.

Das obige ist der detaillierte Inhalt vonWarum verschiebt ein oberer Rand eines inneren Elements dessen übergeordnetes Div und wie kann ich das beheben?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!