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