margin: 0 无法清除非 margin 类型的默认间距，如 padding、逻辑属性（margin-block）、用户代理样式表的继承值或 flex/grid 的 gap/对齐间隙；需用开发者工具定位真实来源并针对性重置。
为什么 margin: 0 有时清不掉外边距
浏览器对某些元素（比如 、<h1></h1>、<p></p>）有内置的默认样式，但这些“默认外边距”未必全是 margin —— 有些是 margin，有些其实是 padding，还有些来自用户代理样式表（user agent stylesheet）的继承或计算值。直接写 margin: 0 只能清 margin，对其他来源无效。
- 检查是否误把
padding当成margin：用浏览器开发者工具选中元素，看“Computed”面板里margin和padding各自的值 -
的默认外边距通常来自浏览器，但部分浏览器（如 Chrome）会给加margin: 8px，而 Safari 可能加的是margin-block: 1em（逻辑属性） - 块级元素如
<p></p>、<h1></h1>的上下间距，可能由margin-block-start/margin-block-end控制，而非传统margin-top/margin-bottom
全局重置推荐写法：用 * { margin: 0; padding: 0; } 还是 html, body { margin: 0; }
全盘 * 重置看似彻底，但副作用明显：它会抹掉所有元素的原生间距（比如表单控件、列表项、按钮内边距），导致后续要手动补大量 padding，维护成本高。更稳妥的做法是精准控制顶层容器和常见文本元素。
- 优先写：
html, body { margin: 0; padding: 0; }—— 解决最常被抱怨的“页面四周白边” - 补充常见文本块：
h1, h2, h3, p, ul, ol, dl, dd, blockquote { margin: 0; } - 避免用
*重置，除非你明确要接管所有默认样式（比如开发 UI 组件库） - 注意：CSS 重置顺序很重要，确保你的规则没有被更高优先级的样式（如 inline style 或 !important）覆盖
Flex/Grid 布局下，margin: 0 为什么还留缝隙
当父容器设为 display: flex 或 display: grid，子元素即使 margin: 0，也可能因对齐方式（如 align-items: stretch）或基线对齐（align-items: baseline）产生视觉间隙；更常见的是子元素本身是 inline 或 inline-block 元素（比如未设置 display: block 的 <img>），其默认的 vertical-align: baseline 会引入底部空白。
- 检查子元素是否意外保持
display: inline：给它加display: block或vertical-align: top - Flex 容器中慎用
align-items: baseline，改用flex-start或stretch - Grid 中若列轨道定义含
gap，那不是margin，而是布局间隙，需改gap: 0而非清margin - 图片下方空白典型表现：父容器
font-size: 0或子元素vertical-align: middle可临时解决
现代方案：用 all: unset 清除一切默认样式是否安全
all: unset 会重置所有可继承和不可继承属性（包括 margin、padding、border、font、color 等），但它过于激进——文本会丢失字体、颜色、行高，表单失去默认交互样式，屏幕阅读器相关语义也可能被弱化。
- 仅在极简组件封装场景下考虑：
.card__content { all: unset; }，且必须紧跟着手动恢复必要样式（如display: block、font-family: system-ui） - 绝对不要对
body或全局组件根节点用all: unset - 兼容性注意：IE 完全不支持
all，Edge 16+ 支持，主流浏览器无问题，但风险不在兼容性，而在样式失控 - 比起
all: unset，更推荐用margin: 0; padding: 0; border: none; background: transparent;这类显式声明
事情说清了就结束。真正难的不是写 margin: 0，而是判断那个“看起来像外边距”的空隙，到底来自哪里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
