h3默认margin在各浏览器中不一致，因user agent stylesheet定义不同；normalize.css通过校准而非清零统一为margin-block-start: 0.85em、margin-block-end: 0.45em，兼顾一致性与可读性，并修复旧版safari/ie中display问题。
h3 默认 margin 值在 Chrome/Firefox/Safari/IE 中不一致
Chrome 和 Firefox 给 h3 设的默认 margin-top 和 margin-bottom 通常是 1em（约 21px），但 Safari 可能略小（0.83em），IE8–11 则更保守（0.67em 或直接为 0）。这不是 bug，而是各浏览器 user agent stylesheet 的原始设定不同。
更麻烦的是外边距折叠（margin collapsing）：如果 h3 是 body 的第一个子元素，且 body 没有 border-top 或 padding-top，那么 h3 的 margin-top 会“穿透”到视口顶部——你调 body { margin: 0; } 也拦不住它。
- 用 DevTools 的 Computed 面板直接查
h3的margin-top值，别猜 - 不要只重置
body，必须显式处理语义标题标签：h1, h2, h3, h4, h5, h6 { margin: 0; } - 若需保留结构语义又想要可控间距，建议用
margin-block-start/margin-block-end（现代浏览器支持），而非传统margin-top/margin-bottom
为什么 normalize.css 比 *{margin:0;padding:0;} 更适合 h3
* { margin: 0; padding: 0; } 看似简单，但它会把 h3 的可读性间距一并抹掉，后续还得手动加回来；而 normalize.css 保留了合理的排版节奏：它把 h3 的 margin-top 统一设为 0.85em、margin-bottom 设为 0.45em，既消除了跨浏览器差异，又没牺牲阅读体验。
-
normalize.css不清空所有 margin，而是“校准”——h3在 Chrome/Firefox/Safari 下最终显示几乎一致 - 它还修复了
h3在旧版 Safari 中被当成display: inline的问题（IE8–9 更是连标签都不认识，得靠html5shiv） - 如果你用的是现代构建工具（Vite/Webpack），直接
import 'normalize.css'，比手写重置更可靠
IE8–9 中 h3 标签根本不会渲染成块级元素
IE8 及更早版本不认识 h3 这类 HTML5 标签，DOM 中它只是个未知元素，默认 display: inline，导致文字挤在一起、margin 不生效、甚至影响父容器高度计算。
- 必须引入
html5shiv.min.js，且脚本要放在所有 CSS 之前 - 即使加载了
html5shiv，仍需补一句h3 { display: block; }，不能依赖它自动修复 display - 检查方式：在 IE8 DevTools 中选中
h3，看 Styles 面板里display是否为block，Computed 面板里margin-top是否有值
用 CSS 自定义 h3 间距时容易忽略的细节
当你写 h3 { margin: 1rem 0; }，看似干净，但实际在 Flex 或 Grid 容器中可能失效：现代浏览器下 margin 会被 gap 覆盖或与 align-items 冲突；而在 Safari 14–15 中，h3 若含图片或内联元素，其 min-width 计算异常，导致 margin 挤压换行。
- Flex 容器里的
h3，优先用margin-block而非margin-top，避免被主轴对齐干扰 - Safari 14–15 下，给
h3加min-width: 0可防止内容撑破容器 - 避免在
h3上同时设margin和padding，尤其当它作为卡片标题时，box-sizing: border-box必须显式声明
真正难的不是知道 h3 有默认 margin，而是它在不同上下文里会以不同方式“漏出来”：可能是外边距折叠、可能是 HTML5 兼容缺失、可能是 Flex 子项收缩逻辑冲突。每个场景都需要对应验证手段，而不是套一套重置就完事。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
