Warum scheint mein fester Header einen zusätzlichen oberen Rand zu haben?

Warum verschiebt sich mein Header nach unten, wenn ich ihn feststelle?

In Ihrem Codepen stellen Sie den Header so ein, dass er fixiert ist, was bedeutet, dass er in der Position bleibt Dieselbe Position beim Herunterscrollen. Allerdings schien sich dadurch der Rand oben im Header zu vergrößern. Dies wird durch Margin Collapsing verursacht.

Was ist Margin Collapsing?

Margin Collapsing ist ein CSS-Verhalten, das die Ränder benachbarter Elemente auf Blockebene, wie z. B. Ihres, minimiert Kopfzeile und das Formular darunter. Wenn der Header fixiert wird, wird er aus dem Dokumentfluss entfernt und das Formular wird zum ersten Inflow-Element. Dies führt dazu, dass der obere Rand des Formulars mit dem oberen Rand des Körpers zusammenfällt, was zu einem größeren Rand führt.

So beheben Sie das Problem

Es gibt zwei gängige Möglichkeiten, dieses Problem zu lösen indem Sie die Randreduzierung deaktivieren oder einen oberen Randwert für das Element festlegen, das ihn benötigt.

Randreduzierung deaktivieren

Um den Rand zu deaktivieren Fügen Sie beim Reduzieren die CSS-Regel „padding-top: 1px“ zum Body-Element hinzu. Dadurch wird der Browser gezwungen, den oberen Rand des Textkörpers beizubehalten.

body {
  padding-top: 1px; /* Disable margin-collapsing */
}

Einen Wert für den oberen Rand festlegen

Alternativ können Sie der Kopfzeile einen oberen Rand hinzufügen. Dadurch wird der Abstand zwischen der Kopfzeile und dem oberen Rand des Ansichtsfensters festgelegt:

#header {
  margin-top: 2rem;
}

Das obige ist der detaillierte Inhalt vonWarum scheint mein fester Header einen zusätzlichen oberen Rand zu haben?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!