HTML および CSS のヘッダー上の予期しないマージンを削除するにはどうすればよいですか?

ヘッダー周囲の不要なマージンの削除

ヘッダー上の不要なスペースを最小限に抑えるために、HTML と CSS スニペットが導入されました。 :

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>

余白を設定しているにもかかわらず、 要素をゼロにしても、ゼロ以外のマージンが引き続き表示されます。この謎の空間はマージンの崩壊から生じます。

マージンの崩壊を理解する

マージンの崩壊は、隣接するマージンを持つ特定の要素が 1 つのマージンに崩壊するときに発生します。これは、ブロックレベルのコンテナ内の要素でよく見られます。この例では、

は

h1 {
    margin-top: 0;
}

解決策: 特定のヘッダー要素にマージンを適用する不要なマージンを削除するには、特定のヘッダー要素にゼロのマージンを適用します。問題の原因となっているヘッダー要素。この場合、それは

です。

の margin-top プロパティを設定することで、要素をゼロにすると、マージンの崩壊が解消され、ヘッダー上の不要なスペースが削除されます。

以上がHTML および CSS のヘッダー上の予期しないマージンを削除するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。