normalize.css 主动重置浏览器默认边距（如 body margin:0、标题/段落间距归零），导致原有样式异常；应通过开发者工具定位被重置元素，再用语义化类名（如 .section-spacing、.text-block）精准补充间距，而非全局覆盖。
引入 normalize.css 后出现边距异常，不是它“出错了”，而是它主动重置了浏览器默认样式（比如 body 的 margin 被设为 0，h1–h6、p、ul 等元素的上下边距被标准化），而你原来的 CSS 可能依赖旧浏览器的默认值。解决的关键是：**看清 normalize 做了什么，再针对性补充语义化间距**，而不是粗暴覆盖或回退。
先确认 normalize 实际影响了哪些元素
打开浏览器开发者工具（F12），选中异常有边距的元素（如 <h2></h2>、<p></p> 或外层 <div>），在 Styles 面板里搜索 <code>margin 和 padding，看是否被 normalize.css 显式设置了值（通常带 /* normalize.css v8.x */ 注释）。常见被重置的包括：
-
body { margin: 0; }→ 整页内容紧贴视口顶部左侧 -
h1–h6 { margin-top: 0; margin-bottom: 0.85em; }→ 标题不再“自带大空隙” p, ul, ol, dl { margin-top: 0; margin-bottom: 1em; }-
button, input, select, textarea { margin: 0; }→ 表单控件失去默认垂直间距
用语义化类名统一控制段落与标题间距
避免在全局重写 h1、p 等标签样式（破坏可维护性），推荐定义清晰的布局类，例如：
- 给需要视觉呼吸感的区块加
section-spacing：.section-spacing { margin-bottom: 2rem; } - 对标题组使用
heading-group控制内部紧凑、外部留白：.heading-group > * { margin: 0; }<br>.heading-group { margin-bottom: 1.5rem; } - 段落流用
text-block保证行间节奏：.text-block { margin-bottom: 1rem; }<br>.text-block:last-child { margin-bottom: 0; }
恢复 body 全局内边距（按需）
如果项目需要传统“页面居中+四周留白”的效果，不要改 body { margin: 0; }，而是在其子容器上加约束：
立即学习“前端免费学习笔记（深入）”；
- 创建一个包裹容器：
<body><br> <div class="page-wrapper">...</div><br></body>
- 设置安全内边距：
.page-wrapper { max-width: 1200px; margin: 0 auto; padding: 1.5rem; }
这样既保留 normalize 的干净起点，又实现视觉舒适区。
表单与列表等组件需显式补间距
normalize 清除了 form、fieldset、li 的默认 margin，此时应由组件自身负责结构节奏：
- 垂直堆叠的表单项：
.form-field { margin-bottom: 1rem; }<br>.form-field:last-child { margin-bottom: 0; } - 无序/有序列表项间距：
ul, ol { padding-left: 1.5rem; }<br>ul li, ol li { margin-bottom: 0.5rem; }<br>ul li:last-child, ol li:last-child { margin-bottom: 0; }
