如何消除 HTML/CSS 中的默认正文边距和额外空间？

消除正文或默认 CSS 样式周围的边距空间

在元素周围遇到不需要的额外空间可能会令人沮丧。这个问题的出现是由于的固有边距属性造成的。

CSS 中的默认正文边距

默认情况下，HTML

元素有 8px 边距，导致页面内容周围有空间。要纠正此问题，必须使用 CSS 显式删除这些边距：

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

全局 CSS 重置

或者，更全面的解决方案是采用全局 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中文网其他相关文章！