body { margin: 0; } 仅清除 body 自身边距，h1、p、ul 等元素默认外边距和内边距仍存在；顶部“白边”常因 h1 的 margin-top 与 body margin 折叠所致，可用 padding-top 或 border-top 验证；* { margin: 0; padding: 0; } 虽见效快但破坏表单、列表等语义样式，推荐精准重置 html、body 及标题、段落、列表等常用元素。
直接写 body { margin: 0; } 只能清掉 body 自己的边距，但页面里 h1、p、ul 还是会各自留白——这不是你漏写了，是浏览器本来就这么干的。
为什么 body { margin: 0; } 清不干净顶部和左右白边
主流浏览器（Chrome/Firefox/Safari）默认给 body 加了 margin: 8px，这会造成四周“白边”；但更隐蔽的问题是：第一个子元素（比如 h1）的 margin-top 会和 body 的 margin 折叠（margin collapsing），直接顶到视口顶部，导致你看到的“顶部空白”其实是 h1 的默认上边距，不是 body 没清干净。
- 用 DevTools 选中
h1，看 “Computed” 面板里的margin-top值（Chrome 是21.33px，Firefox 略有不同） -
body设了padding-top: 1px或border-top: 1px solid transparent就能阻止折叠，这是验证是否为折叠问题的最快方式 - 别只盯着
margin——ul的左侧空白常是padding-left，blockquote的缩进是margin-inline-start
初学者该用 * { margin: 0; padding: 0; } 吗
能立刻见效，但代价明显：所有表单控件（input、button）文字会紧贴边框，textarea 失去内边距，li 缩进消失，后续反而要一条条加回去。它不是“清边距”，是“废语义”。
- 如果只是练手小页面，且不涉及表单或列表，可以临时用，但务必加在 CSS 最顶部
- 必须同步写
* { box-sizing: border-box; }，否则后面设width: 100px; padding: 10px;时宽度会超预期 - 千万别在
*::before/*::after上再设margin或padding——它们本就不该有，默认加了反而干扰定位
更靠谱的起步写法：只重置真正冒白边的元素
把下面这段代码贴到你 CSS 文件最开头，覆盖 95% 的初学场景：
html, body { margin: 0; padding: 0; }
h1, h2, h3, h4, h5, h6, p, ul, ol, dl, pre, blockquote, figure { margin: 0; }
ul, ol, li { padding: 0; list-style: none; }
table { border-collapse: collapse; border-spacing: 0; }
td, th, caption { padding: 0; }
-
html也加进来，是为了防止某些旧浏览器对html元素设了 margin（极少见，但存在） -
list-style: none必须跟padding: 0一起写，否则ul左侧缩进可能残留 - 如果用了 Bootstrap，直接给
，比手写 CSS 更稳，它带!important，能压住你后面不小心写的padding: 100px
真正难处理的从来不是“怎么清”，而是清完之后发现 input 文字贴边、h2 和 p 挨太近、表格线错位——这些不是 bug，是你开始需要思考“哪里该有间距”了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
