需设ruby { line-height: 1.8; }和rt { font-size: 0.6em; line-height: 1; }，禁用margin/padding；连续ruby间空隙不均时，父容器加font-size: 0再单独设ruby字号。
ruby标签里汉字和拼音之间太挤，怎么加间距？
直接给 ruby 或 rt 加 letter-spacing 没用——它只作用于字符本身，不控制汉字和拼音之间的垂直/水平距离。真正起效的是 line-height 和 font-size 的组合控制。
常见错误现象：Chrome 看着正常，Firefox 里拼音紧贴汉字底部，Safari 中长拼音折行后错位。
-
ruby { line-height: 1.8; }—— 这是最关键的一条，必须设，且值要 ≥ 当前字体大小的 1.6 倍；低于 1.5 容易压字 -
rt { font-size: 0.6em; line-height: 1; }—— 单独重置rt行高，防止 Firefox 把拼音撑得过高 - 别用
margin或padding调节rt，会破坏 ruby 内联布局逻辑
连续多个ruby之间空隙不一致，尤其在 iOS Safari 上
iOS Safari 对连续 ruby 元素的字间距（glyph advance）处理有微小偏差，不是 bug，是渲染引擎对 inline-level 元素 baseline 对齐的实现差异。
使用场景：地名“重庆”“哈尔滨”这类多字注音，相邻 ruby 看起来松紧不一。
立即学习“前端免费学习笔记（深入）”；
- 父容器加
font-size: 0;，再给每个ruby单独设font-size: 16px;（或继承值） - 避免在
ruby外层套span或其它 inline 元素，中间不能有空格、换行符 - 如果用预处理器生成，确保模板输出是紧凑 HTML：
<ruby><rb>重</rb><rt>chóng</rt></ruby><ruby><rb>庆</rb><rt>qìng</rt></ruby>，而非带缩进的格式
想让拼音统一右对齐或居中，但 rt 默认总在正上方
rt 的定位由浏览器内置 ruby 布局引擎控制，CSS 的 text-align、justify-content 对它无效。强行用 position: relative 会破坏语义与无障碍支持。
实际能做的只有微调视觉重心：
- 用
ruby { text-align: center; }配合固定宽度容器，可让整组注音视觉居中（适用于标题类短文本） - 对单个字，靠调整
rt的letter-spacing和font-weight平衡左右视觉重量，比如“长”字拼音cháng比zhǎng少一划，可略增前者 letter-spacing - 真要右对齐（如竖排文档），需改用 CSS Writing Modes：
ruby { writing-mode: vertical-rl; }，此时rt自动出现在右侧，但需全站统一排版逻辑
rp括号影响了字间距，怎么让它不占位？
rp 是纯 fallback 用的，现代浏览器会隐藏它，但它仍参与 inline 布局计算——尤其当父元素 font-size 较大时，括号会悄悄撑开间距。
性能 / 兼容性影响：IE11、Outlook 桌面版、部分邮件客户端依赖 rp 显示括号，删掉会导致降级后完全不可读。
- 确保
rp内容仅为半角括号：<rp>(</rp><rt>nǐ</rt><rp>)</rp>，不要加空格或中文标点 - 若发现括号导致异常间距，可加
rp { font-size: 0.5em; }缩小其 layout footprint - 别试图用
visibility: hidden或display: none隐藏rp，这会让老环境彻底丢失括号
最常被忽略的一点：ruby 的字间距问题从来不是单一 CSS 属性能解决的，它是 line-height、font-size、baseline 对齐、以及浏览器内核对 inline-level 元素布局策略共同作用的结果。调一个值就想要全局一致，基本都会翻车。
