如何消除 HTML 元素周围不需要的空白？

消除元素周围的空白：解决CSS默认值

在网页设计中，尽管指定了零，但元素周围的多余空间并不罕见边距和填充。这可以归因于应用于

的默认样式。元素。默认情况下，浏览器会在正文的每一侧添加 8px 的边距。

解决方案：自定义正文

要解决此问题，您可以覆盖默认的正文样式通过在 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 重置](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中文网其他相关文章！