div 要素に余分な空白が残るのはなぜですか? デフォルトの CSS スタイルとマージンを削除するにはどうすればよいですか?

マージンスペースとデフォルト CSS スタイルの削除

初心者が初めてプログラミングを学習するとき、div 要素の周囲に余分な空白があるという問題に遭遇する可能性があります。さらに、border、padding などのスタイル プロパティは効果がなく、空白を削除できません。

次のコードを考えてみましょう:

<div>

スタイル シートは次のとおりです:

#header_div  {
    background: #0A62AA;
    height: 64px;
    min-width: 500px;
} 
#vipcentral_logo { float:left;  margin: 0 0 0 0; }
#intel_logo      { float:right; margin: 0 0 0 0; }

ただし、レンダリングではブラウザの端とツールバーのある青い領域が表示されます。間に余分なスペースがあります:

[図は余分なスペースを示しています]

この問題を解決する鍵は次のとおりです:

デフォルトのマージン: body 要素にはデフォルトで 8 ピクセルの余白があり、これにより div 要素がブラウザの端に収まるのを防ぎます。

解決策:

1. クリアボディマージン:

body { 
    margin: 0;   /* Remove body margins */
}

2. グローバル リセットを使用:

*,
*::before,
*::after { 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
}

3. 限定リセット範囲:

html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, hgroup, menu, nav, section, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}

4. その他CSS リセット:

meyerweb.com/eric/tools/css/reset/
github.com/necolas/normalize.css/
html5doctor.com/html- 5 -reset-stylesheet/

以上がdiv 要素に余分な空白が残るのはなぜですか? デフォルトの CSS スタイルとマージンを削除するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。