マージンとパディングをチェックしたにもかかわらず、Web ページの上部に空白があるのはなぜですか?

ページ上部の空白: 謎を明らかにする

Web ページの上部に予期しない空白がありました。すべての要素を検査し、明らかなマージンやパディングが見つからなかったにもかかわらず。 HTML 要素を検査すると、スペースがあることに気付きましたが、body 要素にはスペースが含まれていませんでした。 DOCTYPE 宣言を削除すると、問題は解決しました。

この問題に対処するには、Web サイトのスタイル シート内で CSS リセットを実装することを検討してください。ブラウザによっては、気づかないデフォルトのマージンやパディングが表示される場合があります。 CSS リセットは、すべてのブラウザーで要素のスタイルを標準化することにより、白紙の状態を初期化します。

CSS リセット コード:

* {
        margin: 0;
        padding: 0;
        border: 0;
        outline: 0;
        font-size: 100%;
        vertical-align: baseline;
        background: transparent;
    }

この包括的なリセットにより、次の場所にある不要な空白が削除されます。ページの上部または他の場所。このリセット コードをスタイル シートの先頭に忘れずに配置してください。

更新: ブラウザー間互換性のためのユニバーサル セレクター:

ユニバーサル セレクターの使用に関する Frank の提案 ( *) すべての要素を明示的にリストするのではなく、注目に値します。このセレクタは、すべての主要なブラウザでブラウザ間互換性があることが証明されています。

* {
        margin: 0;
        padding: 0;
        border: 0;
        outline: 0;
        font-size: 100%;
        vertical-align: baseline;
        background: transparent;
    }

いずれかの方法を実装すると、空白の問題に効果的に対処し、異なるブラウザ間で一貫したレイアウトが保証されます。

以上がマージンとパディングをチェックしたにもかかわらず、Web ページの上部に空白があるのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。