CSS中“清除默认外边距”远不止简单写一句`margin: 0`——看似是外边距的空白，实则可能源于padding、逻辑属性（如`margin-block`）、用户代理样式表的继承值、Flex/Grid的`gap`或`align-items`对齐行为，甚至`inline`元素的`vertical-align`基线对齐；精准排查需依赖开发者工具的Computed面板定位真实来源，全局`* { margin: 0; padding: 0; }`虽直观却易破坏原生UI体验，更推荐分层策略：顶层用`html, body { margin: 0; padding: 0; }`解决页面白边，关键文本元素单独重置`margin`，Flex/Grid布局中优先调整`gap`和`display/vertical-align`，而激进的`all: unset`仅适用于高度受控的组件封装场景——真正难点不在代码本身，而在于读懂浏览器究竟把哪类“隐形间距”悄悄塞进了你的布局里。

为什么 margin: 0 有时清不掉外边距

浏览器对某些元素（比如 、

、

）有内置的默认样式，但这些“默认外边距”未必全是 margin —— 有些是 margin，有些其实是 padding，还有些来自用户代理样式表（user agent stylesheet）的继承或计算值。直接写 margin: 0 只能清 margin，对其他来源无效。

• 检查是否误把 padding 当成 margin：用浏览器开发者工具选中元素，看“Computed”面板里 margin 和 padding 各自的值
• 的默认外边距通常来自浏览器，但部分浏览器（如 Chrome）会给 加 margin: 8px，而 Safari 可能加的是 margin-block: 1em（逻辑属性）
• 块级元素如

  、

  的上下间距，可能由 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 的 ），其默认的 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，而是判断那个“看起来像外边距”的空隙，到底来自哪里。

理论要掌握，实操不能落！以上关于《CSS清除默认外边距方法详解》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！