私の固定ヘッダーの上部マージンが余分にあるように見えるのはなぜですか?

固定に設定するとヘッダーが下に移動するのはなぜですか?

コードペンでヘッダーを固定に設定します。つまり、ヘッダーはヘッダーに固定されます。下にスクロールしても同じ位置。しかし、そうするとヘッダー上部の余白が増えたように見えます。これは、マージン折りたたみが原因で発生します。

マージン折りたたみとは何ですか?

マージン折りたたみは、隣接するブロックレベル要素のマージンを折りたたむ CSS 動作です。ヘッダーとその下のフォーム。ヘッダーが固定されると、ヘッダーはドキュメントのフローから削除され、フォームが最初のインフロー要素になります。これにより、フォームの上のマージンが本文の上のマージンと一緒に折りたたまれ、より大きなマージンが表示されます。

修正方法

この問題を処理するには、次の 2 つの一般的な方法があります。マージンの折りたたみを無効にするか、必要な要素に上部マージンの値を設定します。

マージンの無効化折りたたみ

マージンの折りたたみを無効にするには、padding-top: 1px CSS ルールを body 要素に追加します。これにより、ブラウザは本文の上マージンを維持するようになります。

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

上マージン値の設定

または、ヘッダーに上マージンを追加します。これにより、ヘッダーとビューポートの上部の間の距離が設定されます:

#header {
  margin-top: 2rem;
}

以上が私の固定ヘッダーの上部マージンが余分にあるように見えるのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。