ruby标签不改变段落间距但会破坏相邻p元素的margin合并，导致间距加倍；需重置p的margin并手动控制间距，同时注意line-height和响应式下的换行问题。
ruby标签本身不改变段落间距，但会干扰margin合并
浏览器对 <p></p> 的默认上下外边距（margin-top 和 margin-bottom）仍起作用，但只要段落里嵌了 <ruby></ruby>，就可能让相邻 <p></p> 的垂直 margin 合并不按预期发生——不是因为 <ruby></ruby> 有特殊样式，而是它改变了元素的“块级上下文”或触发了某些渲染边界。
常见错误现象：<p>第一段</p>
<p><ruby><rb>注音字</rb><rt>yīn</rt></ruby></p> 看起来两段之间空隙变大，实际是首段的 margin-bottom 和次段的 margin-top 没合并，各自生效了。
- 检查 computed styles 时，发现两个
<p></p>的 margin 值都显示为 1em，但实际间距却是 2em —— 这就是 margin 未合并的典型表现 -
<ruby></ruby>是内联级容器，但它的内部结构（<rb></rb>、<rt></rt>）在某些引擎中会轻微影响父<p></p>的 BFC 行为 - 尤其在 Safari 16–17 和部分安卓 WebView 中，
<ruby></ruby>周围若有display: inline-block或vertical-align干预，更容易打破 margin 合并链
用margin: 0重置后手动加间距最稳妥
与其依赖浏览器对含 <ruby></ruby> 段落的 margin 合并逻辑，不如主动清掉默认外边距，再统一控制。
推荐写法：
p {
margin: 0;
}
p + p {
margin-top: 1.2rem;
}
这样不管中间有没有 <ruby></ruby>，所有段落之间的视觉距离都一致。
- 别只清
margin-bottom：有些场景下<ruby></ruby>让段落“变高”，导致后续段落的margin-top被撑开，清双方向更保险 - 避免用
:first-child/:last-child微调首尾：若<p></p>外层有其他非段落元素（如<h2></h2>），这些伪类容易失效 - 如果必须保留首段顶边距，可用
.content > p:first-of-type { margin-top: 1rem; }，比:first-child更可靠
ruby所在段落内部行高易被line-height误伤
line-height 控制的是段落内文字行距，而 <ruby></ruby> 的 <rt></rt> 注音通常垂直偏移，它会和基线文字共用同一行盒（line box）。一旦 line-height 设得太小（比如 1 或 1.2），<rt></rt> 就可能被裁切或压到下一行文字上。
- 安全值起步：设
line-height: 1.6可容纳大多数汉字+拼音组合；若字体偏高（如 Noto Sans CJK），建议1.7起步 - 不要给
<ruby></ruby>单独设line-height：它不继承，且可能破坏<rb></rb>和<rt></rt>的相对定位 - 若注音频繁换行（如长数字串配拼音），需额外加
white-space: nowrap到<ruby></ruby>上，否则line-height再大也救不了断行错位
真正麻烦的是响应式下ruby与段落间距的耦合
当屏幕缩小时，<ruby></ruby> 容易因容器变窄而换行，此时原本单行的注音变成两行，段落整体高度突增——但你的 margin-bottom 还是原来的值，结果段落之间看起来“挤”了，其实只是内容变高了。
这不是 margin 的问题，而是内容尺寸不可控带来的视觉错觉。
- 解决思路不是调 margin，而是限制
<ruby></ruby>的宽度或强制不换行：ruby { display: inline-block; max-width: 100%; white-space: nowrap; } - 慎用
font-size: clamp()配合 ruby：某些旧版 Safari 对<rt></rt>的缩放支持不完整，可能导致拼音大小失真 - 最稳的降级方案：在小屏下用媒体查询隐藏
<rt></rt>，只留汉字，避免一切排版风险
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
