HTML body的margin="0"重置？消除网页边缘空白基础-html教程-PHP中文网

body默认margin由浏览器user agent stylesheet设置为8px，需用body{margin:0}覆盖；常见残留空白还源于外边距合并、子元素默认边距及html/body未设height:100%导致vh布局异常。

$html body的margin=\$

body 默认 margin 是谁加的

不是 body 自己加的，是浏览器内置样式表（user agent stylesheet）给 body 设了默认 margin: 8px（Chrome/Firefox/Edge 均如此）。所以即使你没写任何 CSS，页面四周也会有白边。

用 CSS reset 还是直接覆盖

没必要引入整套 reset 库。只需一行 CSS 覆盖即可，更轻量、更可控：

body { margin: 0; }

注意：这行必须生效——检查是否被其他 CSS 规则以更高优先级（比如 !important 或更具体的选择器）意外覆盖；也确认它写在 HTML 的 <style></style> 里或外部 CSS 中且已加载。

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

为什么有时设了 margin: 0 还有空白

常见原因不止一个，按发生频率列出来：

html 元素也有默认 margin？不，它没有，但可能有 padding 或继承的 background 导致视觉误判
body 外层有滚动条宽度影响布局？不是 margin，是 viewport 右侧滚动条挤占空间，可加 html { overflow-y: scroll; } 预留位置
子元素（如 div、h1）自带 margin-top/bottom，造成“看起来 body 没清干净”——这是外边距合并（margin collapse）现象，需单独重置 h1, p, ul, ol { margin: 0; }
用了 box-sizing: border-box 但忘了 html, body { height: 100%; }？那 height: 100vh 的子容器可能溢出，触发滚动条和额外空白

最简可靠初始化写法

仅针对“消除边缘空白”这一目标，推荐这段最小集合（放在 CSS 最前面）：

*, *::before, *::after {
  box-sizing: border-box;
}
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}
body {
  line-height: 1;
}

其中 line-height: 1 是为了防止内联元素（如文字）撑高 body 导致底部多出空白；height: 100% 在 html 和 body 上都设，是为了让 100vh 行为更稳定——这点常被跳过，但一旦你要做全屏布局，漏掉它就会在 Safari 或某些移动端出现不可预期的滚动或留白。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索前端的入门与实战技巧！