body { margin: 0 } 无效是因 html 或子元素外边距溢出；应重置 html, body 或用 * 通配符，并置于 head 内联样式中优先加载，同时注意框架挂载点及 SSR 注入影响。
body { margin: 0 } 为什么加了没效果？
常见现象是写了 body { margin: 0 }，但页面顶部/左右仍有空白。这不是 CSS 失效，而是浏览器默认样式在作祟——body 自身 margin 清掉了，但 html 或某些内联元素（比如首行 p、h1）的外边距会“溢出”到视口边界，造成视觉残留。
实操建议：
- 优先用
* { margin: 0; padding: 0 }全局重置（简单粗暴，适合小项目或原型） - 更稳妥的做法是只重置根级容器：
html, body { margin: 0; height: 100% }，再配合body { display: flex; flex-direction: column }避免子元素 margin 溢出 - 若用现代布局（如 Grid / Flex），直接给
body设margin: 0+min-height: 100vh，比依赖html更可控
用 style 标签写全局重置，该放 head 还是 body 底部？
必须放在 里，且最好在所有其他 CSS 之前。否则会出现“闪白边”：浏览器先按默认样式渲染出带边距的页面，等你的 style 加载并生效后才收缩，肉眼可见跳动。
实操建议：
- 把重置代码写成内联
，紧贴开始位置，不依赖外部文件加载顺序 - 避免和框架（如 Bootstrap）的重置规则冲突：如果引入了第三方 CSS，你的
body { margin: 0 }要加!important或提高选择器权重（例如html body { margin: 0 }） - 不要用
@import引入重置样式——它会阻塞渲染，失去“快速”的意义
rem/vh/vw 单位会影响边距重置吗？
不影响。边距重置本身只解决“默认留白”，和单位无关。但如果你后续用 rem 控制组件间距，而根字体大小（font-size）没设好，就会让“看起来没边距”变成“其实有隐性缩放边距”。
实操建议：
- 重置阶段不用
rem，统一用px或无单位数值（如margin: 0） - 如果要用响应式边距，等重置完成后再单独定义容器类，比如
.page { padding: clamp(1rem, 4vw, 2rem) } -
vh/vw在移动端易受地址栏显示/隐藏影响，慎用于body的padding—— 它可能让内容突然上移或截断
Vue/React 项目里直接改 body style 为什么有时不生效？
因为这些框架常把应用挂载到一个带默认 margin/padding 的根容器（如 #app），你重置 body 没用，真正要清的是那个挂载点。
实操建议：
- 检查实际挂载节点，比如 Vue CLI 默认是
div#app，应写#app { margin: 0; padding: 0 } - 服务端渲染（SSR）项目中，
body可能被框架注入内联样式，需用!important覆盖或在index.html的中提前声明 - Next.js / Nuxt 等有自定义
document的能力，重置逻辑应写在_document.tsx或app.html里，而非组件内
真正容易被忽略的是：重置只是起点，不是终点。一旦开始用 CSS Grid 或 Flex 布局，body 的 margin 就很少再需要动了——控制权交给了容器内部的 gap 和 align-items。这时候还死盯着 body { margin: 0 }，反而容易掩盖布局结构问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
