Web ページの上部に空白があるのはなぜですか?-CSSチュートリアル-php.cn

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

Barbara Streisand

リリース： 2024-11-13 12:05:02

オリジナル

729 人が閲覧しました

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 サイトの他の関連記事を参照してください。