应同时设置 的 line-height: 1.8、 的 font-size: 0.6em 和 line-height: 1，以确保拼音在各浏览器中垂直居中且不重叠或被截断。
ruby标签里拼音和汉字贴太近，怎么拉开垂直距离
直接写 <ruby>汉<rt>hàn</rt></ruby> 时，拼音常紧贴汉字顶部甚至重叠，根本原因是浏览器对 <rt></rt> 的默认 line-height 和基线（baseline）处理不一致，尤其在 Firefox 或旧版 Safari 中更明显。拉开间距不能只调 margin 或 padding，得从行高协同入手。
关键操作是同时控制三处：<ruby></ruby> 容器的 line-height、<rt></rt> 的 font-size 和 line-height：
-
<ruby> { line-height: 1.8; }</ruby>—— 确保容器有足够垂直空间容纳拼音，低于 1.6 容易挤压 -
<rt> { font-size: 0.6em; line-height: 1; }</rt>—— 字号缩小后必须设line-height: 1，否则 Firefox 会把拼音行高拉得过高，反而造成上下留白失控 - 避免给
<rt></rt>加vertical-align，它会被浏览器忽略或干扰原生 ruby 布局逻辑
为什么只调 font-size 不管用，还可能让拼音被截断
单独设 <rt> { font-size: 0.5em; }</rt> 后，拼音变小了，但若父级 <ruby></ruby> 的 line-height 还是默认值（通常是 1.2 左右），拼音就会被上下内容“夹住”，视觉上像被裁掉顶部或底部。这不是字体问题，是行盒（line box）高度不足。
实测中，Chrome 可能勉强显示，但 Firefox 会直接把拼音压进汉字区域，Safari 则可能在缩放时突然错位。所以必须配对设置：
- 先定
<ruby></ruby>的line-height（建议 ≥1.8） - 再定
<rt></rt>的font-size（0.5em–0.7em 区间最稳） - 最后强制
<rt> { line-height: 1; }</rt>锁死内部行高，不让它继承父级
水平方向居中但左右空隙不均，怎么微调
ruby-align: center 只保证拼音整体相对于汉字水平居中，但单个字宽度不一（比如「一」窄、「龜」宽）时，拼音左右留白看起来不对称。这不是 bug，是浏览器按字符盒（character box）对齐的结果。
若需视觉上更均衡，可用以下方式微调：
- 给
<ruby></ruby>加letter-spacing: 0.05em，轻微拉开汉字间距，让拼音分布更舒展 - 对特别窄的字（如「丶」「一」），手动加
<rb style="width: 1em;">一</rb>固定基字宽度 - 避免用
text-align: justify或word-spacing，它们会破坏<rb>/<rt></rt></rb>的一一对应关系
多字连续标注时，字间拼音间距忽大忽小
当写成 <ruby>北<rt>běi</rt></ruby><ruby>京<rt>jīng</rt></ruby>，两个拼音之间可能出现意外空隙——这是因每个 <ruby></ruby> 是独立内联元素，受空格、换行符或字体度量影响。
解决方法很直接：
- 删掉
和下一个<ruby></ruby>之间的所有空白符（包括换行和制表符） - 或统一用
white-space: nowrap包裹整组，例如：<div style="white-space: nowrap"> <ruby>北<rt>běi</rt></ruby><ruby>京<rt>jīng</rt></ruby> </div> - 不要用
margin调字间距，那会干扰屏幕阅读器对注音语义的解析
真正难调的不是单个字，而是混合排版：比如一行里既有带拼音的汉字，又有英文、数字、emoji。这时 <ruby></ruby> 的 baseline 对齐会失效，必须用 display: inline-flex 手动包裹并统一 align-items，但那就超出纯 HTML/CSS 注音范畴了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
