normalize.css 主动重置浏览器默认边距（如 body margin:0、标题/段落间距归零），导致原有样式异常；应通过开发者工具定位被重置元素，再用语义化类名（如 .section-spacing、.text-block）精准补充间距，而非全局覆盖。
引入 normalize.css 后出现边距异常，不是它“出错了”，而是它主动重置了浏览器默认样式（比如 body 的 margin 被设为 0，h1–h6、p、ul 等元素的上下边距被标准化），而你原来的 CSS 可能依赖旧浏览器的默认值。解决的关键是：**看清 normalize 做了什么，再针对性补充语义化间距**，而不是粗暴覆盖或回退。
先确认 normalize 实际影响了哪些元素
打开浏览器开发者工具（F12），选中异常有边距的元素（如 避免在全局重写 如果项目需要传统“页面居中+四周留白”的效果，不要改 立即学习“前端免费学习笔记（深入）”； normalize 清除了 、 或外层 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; }
.heading-group { margin-bottom: 1.5rem; }text-block 保证行间节奏：.text-block { margin-bottom: 1rem; }
.text-block:last-child { margin-bottom: 0; }恢复 body 全局内边距（按需）
body { margin: 0; }，而是在其子容器上加约束：
.page-wrapper { max-width: 1200px; margin: 0 auto; padding: 1.5rem; }
这样既保留 normalize 的干净起点，又实现视觉舒适区。表单与列表等组件需显式补间距
form、fieldset、li 的默认 margin，此时应由组件自身负责结构节奏：
.form-field { margin-bottom: 1rem; }
.form-field:last-child { margin-bottom: 0; }ul, ol { padding-left: 1.5rem; }
ul li, ol li { margin-bottom: 0.5rem; }
ul li:last-child, ol li:last-child { margin-bottom: 0; }
