应统一用逗号分隔选择器如h1, h2, h3, .title, .subtitle匹配所有标题，重置margin为0后设margin-bottom，规避margin合并，响应式下用rem单位显式声明各断点间距。
用逗号分隔多个选择器匹配不同层级标题
直接写 .h1, .h2, .h3, h1, h2, h3 就能同时选中类名和原生标签标题——只要它们在文档中真实存在，CSS 不关心层级深浅或嵌套关系。浏览器会逐个匹配每个选择器，满足任一即生效。
常见错误是误以为必须用后代选择器（如 article h1, section h2）才能覆盖多层结构，结果导致样式漏掉根级或跨组件的标题。其实多数场景下，你真正要统一的是“所有 h1～h3 标题”，而非“只在 article 里的 h1”。
- 如果项目已用语义化类名（如
heading-lg,heading-md），优先选这些类：.heading-lg, .heading-md, .heading-sm - 若混用原生标签和类，就合并写：
h1, h2, h3, .title, .subtitle - 避免无谓嵌套：
div h1, main h2会漏掉直接在body下的h1，且增加 specificity，后期难覆盖
统一设置 margin 时必须重置浏览器默认值
不重置的话，h1 默认有 margin-top: 0.67em，h2 是 0.83em，p 还自带上下 margin——这些差异会让统一设置的 margin-bottom: 1rem 看起来依然参差不齐。
最稳妥的做法是在 CSS 开头加一行重置：
立即学习“前端免费学习笔记（深入）”；
h1, h2, h3, h4, h5, h6 { margin: 0; }或者更完整地覆盖常用文本元素：
h1, h2, h3, h4, h5, h6, p, ul, ol, dl, blockquote { margin: 0; }- 不要用
* { margin: 0; }—— 它会影响表单控件、表格等非文本元素，引发意外布局偏移 - 重置后立刻补上你需要的间距，比如：
h1, h2, h3 { margin-bottom: 1rem; } - 注意：重置仅影响 margin，padding 通常无需重置，除非你明确要清除内边距
垂直 margin 合并会导致实际间距小于预期
当你给 h2 { margin-bottom: 1.5rem; }，紧接着一个 p { margin-top: 1rem; }，最终两者间距不是 2.5rem，而是 1.5rem（取较大值）。这是 margin collapse 的典型表现，对标题+段落组合尤其明显。
解决方法不是“调大数值硬扛”，而是从结构上规避：
- 只设
margin-bottom，全部标题和段落都统一用它留空，顶部不留 margin - 把标题和后续内容包进同一个容器，用
padding-bottom替代部分外边距（更可控） - 对标题父容器触发 BFC（如加
overflow: hidden），但仅限局部微调，别滥用 - 现代方案：改用
display: flow-root触发 BFC，比overflow更语义清晰且无副作用
响应式边距需按断点单独声明，不能靠继承
CSS 中 margin 不支持“继承后自动缩放”，@media (max-width: 768px) { h1, h2, h3 { margin-bottom: 0.75rem; } } 必须显式写出所有选择器。漏掉任何一个，该断点下那个标题就会回退到默认或上一级规则。
容易被忽略的是单位选择：
- 用
rem而非px，确保随根字体缩放（适配系统字号放大） - 避免混合单位，比如
margin-bottom: 1rem和margin-bottom: 16px并存，后期维护极易错乱 - 如果项目用了 CSS 自定义属性管理间距，记得媒体查询里也重定义变量：
:root { --space-title-bottom: 1rem; } @media (max-width: 768px) { :root { --space-title-bottom: 0.75rem; } }
复杂点在于：标题层级越多（比如还包含 .section-title, .card-title），选择器列表越长，重置和响应式声明就越容易遗漏。建议把标题相关样式收拢在一个独立 CSS 块里，而不是散落在各组件文件中。
