Warum verschiebt das Hinzufügen eines oberen Randes zu einer Kopfzeile die gesamte Kopfzeile nach unten?

Problem mit dem oberen Rand im Header-Element

Warum wird beim Hinzufügen eines oberen Rands zu einem Header-Div das gesamte Header-Div nach unten verschoben?

Dieses Verhalten tritt auf, weil ein oberer Rand, der auf das erste sichtbare Element in einem Container angewendet wird, häufig dazu führt, dass dieses über den verfügbaren Platz seines übergeordneten Elements hinausgeht. Dadurch wird das übergeordnete Element vertikal erweitert, um den Randraum aufzunehmen, wodurch alle nachfolgenden Elemente nach unten gedrückt werden.

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

Lösung :

Um dieses Problem zu beheben, können Sie die Eigenschaft „overflow:auto“ zum übergeordneten Div hinzufügen. Dies führt dazu, dass das übergeordnete Div einen Bildlauf durchführt, wenn der Rand über den verfügbaren Platz hinausgeht, wodurch verhindert wird, dass das Header-Div nach unten verschoben wird.

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

Weitere Einzelheiten finden Sie unter folgendem Link:

Das obige ist der detaillierte Inhalt vonWarum verschiebt das Hinzufügen eines oberen Randes zu einer Kopfzeile die gesamte Kopfzeile nach unten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!