HTML/CSS のデフォルトの本文マージンと余分なスペースを削除するにはどうすればよいですか?

本文またはデフォルトの CSS スタイルの周囲のマージン スペースを削除する

要素の周囲に不要な余分なスペースがあるとイライラすることがあります。この問題は、

の固有のマージン プロパティが原因で発生します。

CSS のデフォルトの本文マージン

デフォルトでは、HTML

要素には 8 ピクセルの余白があり、ページ コンテンツの周囲にスペースが生じます。これを修正するには、CSS を使用してこれらのマージンを明示的に削除することが不可欠です。

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

Global CSS Reset

あるいは、より包括的な解決策は、グローバル CSS を使用することです。リセット。この手法では、すべてのデフォルトのブラウザ スタイルをリセットして、ページ デザインの一貫性と予測可能な開始点を確保します。

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

よりグローバルでないソリューション

必要に応じて、以下を選択できます。次の要素を具体的に対象とする、よりグローバルではないアプローチ:

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;
}

その他の CSSリセット

多数の CSS リセットが利用可能です。以下を含む:

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

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