Warum drückt ein oberer Rand eines untergeordneten Elements dessen übergeordnetes Div nach unten?

Margin-Top drückt übergeordnetes Div nach unten: Verstehen und Beheben des Problems

Viele Entwickler stoßen auf ein besonderes Problem, wenn sie einen oberen Rand auf das anwenden erstes sichtbares Element auf einer Seite: Es bewirkt, dass das übergeordnete Div nach unten verschoben wird. Um die Ursache dieses Verhaltens zu untersuchen und eine Lösung bereitzustellen, analysieren wir das bereitgestellte Code-Snippet:

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

Dieser Code definiert ein Header-Div mit einem verschachtelten h1-Element, das einen Rand von 50 Pixel enthält. Normalerweise gehen wir davon aus, dass dieser Rand den Abstand zwischen h1 und der Oberkante des Header-Div vergrößert. Stattdessen wird jedoch das gesamte Header-Div um 50 Pixel nach unten verschoben.

Um zu verstehen, warum dies geschieht, müssen wir den „Blockformatierungskontext“ berücksichtigen. Bei Anwendung auf das erste sichtbare Element auf einer Seite setzt ein oberer Rand den Blockformatierungskontext zurück, wodurch das übergeordnete Div nach unten gezogen wird.

Eine Lösung für dieses Problem besteht darin, overflow: auto auf das übergeordnete Div anzuwenden . Dadurch kann das übergeordnete Div seine Höhe automatisch an seine untergeordneten Elemente anpassen, einschließlich h1 mit dem oberen Rand:

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

Durch das Hinzufügen von overflow: auto ermöglichen wir, dass sich die Größe des Header-Divs vertikal ändert, und verhindern so dies verhindert, dass es nach unten gedrückt wird, wenn der obere Rand zum h1-Element hinzugefügt wird.

Das obige ist der detaillierte Inhalt vonWarum drückt ein oberer Rand eines untergeordneten Elements dessen übergeordnetes Div nach unten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!