Wie eliminiere ich unerwartete Ränder über einem Header in HTML und CSS?

Unerwünschte Ränder um Kopfzeilen beseitigen

Um unerwünschten Platz über einer Kopfzeile zu minimieren, wurde ein HTML- und CSS-Snippet eingeführt :

body {
  margin: 0px;
  padding: 0px;
}

header {
  margin: 0px;
  padding: 0px;
  height: 20em;
  background-color: #C0C0C0;
}

<header>
  <h1 id="OQ-Online-Judge">OQ Online Judge</h1>
  <form action="<?php%20echo%20base_url();%20?>%20/index.php/base/si" method="post">
    <label for="email1">E-mail : </label>
    <input type="text" name="email">
</form></header>

Obwohl die Ränder des

und

Wenn Sie Elemente auf Null setzen, wird immer noch ein Rand ungleich Null angezeigt. Dieser rätselhafte Raum entsteht durch das Kollabieren von Rändern.

Grundlegendes zum Kollabieren von Rändern

Randkollabieren tritt auf, wenn bestimmte Elemente mit angrenzenden Rändern zu einem einzigen Rand zusammenfallen. Dies wird häufig bei Elementen in Containern auf Blockebene beobachtet. In diesem Fall ist der

und

Elemente sind beide Elemente auf Blockebene.

Lösung: Anwenden eines Randes auf ein bestimmtes Header-Element

Um den unerwünschten Rand zu beseitigen, wenden Sie einen Rand von Null auf das spezifische Element an Header-Element, das das Problem verursacht. In diesem Fall ist es das

Element innerhalb der Kopfzeile.

h1 {
    margin-top: 0;
}

Durch Festlegen der margin-top-Eigenschaft des

Element auf Null gesetzt, wird der Randeinbruch unterbrochen und der unerwünschte Leerraum über der Kopfzeile wird beseitigt.

Das obige ist der detaillierte Inhalt vonWie eliminiere ich unerwartete Ränder über einem Header in HTML und CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!