ruby标签默认间距难控制因它是行内语义容器，浏览器优先保障注音可读性而非留白，且无原生ruby-spacing属性；需用line-height与vertical-align调控rt垂直位置，配合transform或margin微调，再隐藏rp并手动注入括号以统一控制。
ruby标签默认间距为什么难控制
因为ruby本身是行内语义容器，浏览器对它的默认排版逻辑优先保证注音可读性而非视觉留白——rt紧贴基文字上方、rp括号几乎无间隙，导致整体看起来拥挤。CSS里没有ruby-spacing这种原生属性，必须靠组合样式干预。
用line-height和vertical-align微调基线距离
这是最直接有效的手段，尤其针对rt与基文字之间的垂直空隙：
-
rt上加line-height: 1.2可拉开与基文字的默认贴合度（值越小越紧凑，1.4以上开始明显分离） - 配合
vertical-align: top或vertical-align: text-top能进一步抬高rt位置，避免被行高“压扁” - 注意：不要在
ruby父元素上设line-height，否则会同时拉大基文字行距，破坏段落节奏
用margin和transform做精细位移
当需要像素级控制时，margin-top或transform: translateY()比单纯调line-height更可靠：
-
rt { margin-top: -2px; }适合消除rp括号带来的额外下压感 -
rt { transform: translateY(-1px); }不触发重排，性能更好，且兼容display: inline场景 - 慎用
margin-bottom：它会影响后续行的基线计算，可能造成段落错位
rp括号的隐藏与替换策略
rp本意是降级兜底，但现代浏览器都支持ruby，它的括号反而成了干扰项：
- 统一加
rp { display: none; }彻底移除括号，再用rt::before { content: "("; }和rt::after { content: ")"; }手动注入，便于控制字体大小和间距 - 若需保留括号语义，可用
rp { font-size: 0.7em; letter-spacing: 0.5px; }弱化存在感 - 别给
rp设margin——它的渲染行为在不同浏览器中差异较大，容易导致横向错位
ruby的“间距”本质是基文字、rt、括号三者之间的相对定位关系，没有一键美化方案。最稳妥的做法是先禁用rp，再用line-height + transform双控rt位置，最后检查多字连续注音时的横向一致性。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
