HTML 要素の周囲の不要な空白を削除するにはどうすればよいですか?

要素の周囲の空白スペースの削除: CSS デフォルトへの対処

Web デザインでは、ゼロを指定したにもかかわらず要素の周囲に余分なスペースが発生することは珍しくありません。マージンとパディング。これは、

に適用されるデフォルトのスタイルが原因である可能性があります。要素。デフォルトでは、ブラウザはボディの両側に 8 ピクセルのマージンを追加します。

解決策: ボディのカスタマイズ

これに対処するには、デフォルトのボディ スタイルをオーバーライドします。 CSS でマージンをゼロに設定します。これにより、ボディに追加のスペースが追加されなくなります。

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

代替: グローバル リセット

より包括的なソリューションを希望する場合は、グローバル リセットを実装できます。要素に適用されているデフォルトのスタイルをすべて削除するには、リセットします。これは、すべての要素に対してゼロ マージンとパディングを明示的に定義することによって実現されます。

*,
*::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 リセット フレームワークを利用することもできます:

• [Eric Meyer の CSS Reset](http://meyerweb.com/eric/tools) /css/reset/)
• [ニコラス・ギャラガーのNormalize.css](https://github.com/necolas/normalize.css/)
• [HTML5Doctor の HTML5 リセット スタイルシート](http://html5doctor.com/html-5-reset-stylesheet/)

以上がHTML 要素の周囲の不要な空白を削除するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。