标题与段落间距过大需重置默认margin，推荐设h1等标题的margin-bottom为0.3em–0.5em（用em单位确保响应式），优先调整标题而非段落margin-top，并注意Flex/Grid布局中margin叠加或gap冲突问题。
标题和段落之间空隙太大，怎么调小
默认情况下 <h1> 到 <p> 会自带较大上下边距（尤其是 margin-bottom），这是浏览器 UA 样式决定的，不是你写错了。想让标题紧贴正文，核心是重置或覆盖默认 margin。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 给标题元素直接设
margin-bottom: 0.5em;（推荐用 em，响应式更稳） - 避免只设
margin: 0;，否则顶部间距也会消失，可能破坏视觉节奏 - 若用 CSS 重置库（如 normalize.css），它已调整过标题 margin，但值仍偏大，需二次微调
- 注意：Chrome/Firefox 对
<h1>–<h6>的默认margin-bottom约为0.67em，Safari 略高，统一设成0.3em–0.5em更可控
用 padding 替代 margin 能更好控制亲密感吗
可以，但要分清场景：padding 是往标题内部“撑开”空间，margin 是往外“推开”段落。真正影响“标题与下一段距离”的是标题的 margin-bottom 或段落的 margin-top —— 二者之一生效（CSS margin 折叠规则）。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 优先调标题的
margin-bottom，比调段落margin-top更直观、不易误伤其他段落 - 如果标题套了容器（如
<header>），在容器上设padding-bottom反而更安全，不干扰流式布局 - 慎用
padding直接加在<h2>上：会增大点击热区、影响 line-height 计算，还可能让背景色溢出预期范围
Flex/Grid 布局里标题和段落挨太近怎么办
Flex 容器中子项默认不折叠 margin，<h2> 和 <p> 的 margin 会真实叠加，导致间距翻倍；Grid 中虽不叠加，但行间隙（row-gap）可能额外增加空隙。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- Flex 布局下，给标题加
margin-bottom: 0;，再统一用gap控制整体间距（如flex-direction: column; gap: 0.4em;） - Grid 布局中，删掉标题/段落自身的 margin，靠
grid-row-gap或gap统一管理 - 别依赖浏览器默认 margin 在现代布局中“刚好合适”，它和 flex/grid 是不同逻辑体系
移动端标题贴段落时行高错位怎么修
文字大小缩放后，margin 若用 px 单位不会等比缩放，而 line-height 和字体本身会缩，造成标题底部和段落首行基线对不齐，看起来“悬空”或“压字”。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 所有间距一律用
em或rem，例如margin-bottom: 0.35em; - 检查段落
line-height是否设死（如line-height: 1.4;），应保持无单位数值（它是相对于当前 font-size 的倍数） - 必要时对标题加
vertical-align: baseline;（尤其当标题内含 inline 元素时）
em 值的实际像素高度会变，所以测试必须覆盖至少两档字号。 
