body 默认有8px外边距，导致页面出现白边；只需设置body { margin: 0; }即可清除，无需重置所有元素。
为什么
浏览器对 元素默认设置了 margin: 8px（多数桌面浏览器），不是你写错了，是规范里就有的。这个“看不见的边距”会让页面内容离视口边缘空出一圈，尤其做全屏布局或背景色铺满时特别明显。
- 不同浏览器默认值略有差异（比如 Safari 可能是
margin: 8px，旧版 IE 是margin: 0，但现代标准已趋同） -
本身没有默认 margin，但有 —— 所以只重置就够了 - 别用
visibility: hidden或display: none去“隐藏边距”，那是在隐藏整个元素，不是解决边距问题
最简有效的默认边距清除写法
在 CSS 中直接覆盖 的 margin 即可，无需 JavaScript 或复杂 hack：
body {
margin: 0;
}- 这是 W3C 推荐做法，兼容所有现代浏览器（Chrome/Firefox/Safari/Edge）
- 如果同时要清掉内边距（padding），比如某些移动端 WebView 会加
padding: 0，可合并写：body { margin: 0; padding: 0; } - 不要写成
body * { margin: 0; }—— 这会暴力重置所有子元素 margin，反而破坏按钮、段落等默认间距
全局重置要不要用 * { margin: 0; padding: 0; }？
可以，但不推荐作为默认首选 —— 它太粗暴，容易引发后续排版失控。
-
* { margin: 0; padding: 0; }会把<h1></h1>、<p></p><div class="aritcle_card flexRow"> <div class="artcardd flexRow"> <a class="aritcle_card_img" href="/xiazai/skill10370" title="Edge TTS CN"><img src="https://img.php.cn/upload/skill/000/000/081/179310611668593.jpg" alt="Edge TTS CN" ></a> <div class="aritcle_card_info flexColumn"> <a href="/xiazai/skill10370" title="Edge TTS CN">Edge TTS CN</a> <p>使用 node-edge-tts npm 包将文本转换为语音，支持多种声音、多语言、语速调节及音调控制等功能。</p> </div> <a href="/xiazai/skill10370" title="Edge TTS CN" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div>、<ul></ul>等自带 spacing 的元素全部拍平，之后每个地方都得手动加回 margin/padding - 更稳妥的做法是只重置根级容器：
html, body { margin: 0; padding: 0; }（加上是为了防止某些安卓 WebView 的异常继承） - 如需系统性重置，建议用
normalize.css或reset.css，它们保留语义化默认行为，而非一棍子打死
遇到 iframe 或第三方组件仍有边距怎么办？
iframe 默认自带 border 和 margin，且其内部文档有自己的 ，外部 CSS 无法穿透控制。
立即学习“前端免费学习笔记（深入）”；
- 给 iframe 标签加内联样式：
<iframe src="..." style="border: none; margin: 0; display: block;"></iframe> -
display: block能消除 iframe 底部默认的基线对齐空白（常被误认为是 margin） - 若 iframe 内容是你可控的，在其内部 HTML 的 CSS 中同样设置
body { margin: 0; } - 第三方组件（如广告、嵌入地图）若自带外边距，通常需查其文档看是否有
data-*配置项或 class 控制，硬清 margin 可能破坏响应式
实际项目中，body { margin: 0; } 这一行就解决 95% 的“莫名白边”问题；真正麻烦的是那些嵌套 iframe、跨域内容、或被第三方脚本动态注入 style 的场景 —— 那时候得打开开发者工具逐层检查 computed margin，而不是盲目加 reset。
