Web ページの上部に空白があるのはなぜですか?

Barbara Streisand
リリース: 2024-11-13 12:05:02
オリジナル
678 人が閲覧しました

Why Is There White Space at the Top of My Web Page?

HTML ページ上部の空白の問題

Web ページの上部に空白があるとイライラすることがあります。要素を注意深く調べても明らかな原因は見つかりませんでしたが、問題は HTML 要素に起因しているようです。

これに対処するには、Web サイトのスタイル シートの先頭に CSS リセットを追加することを検討してください。ブラウザによってデフォルトのマージンとパディングがレンダリングされるため、外部スタイル シートも予期しない動作を引き起こす可能性があります。 CSS リセットでは、すべての要素がベースラインに設定され、これらの不一致が解消されます。

次の CSS リセット コードを使用します:

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, caption {
    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 サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート