ruby标签无内置边距，强行设margin/padding会破坏行内流布局；应通过line-height、font-size及父容器padding/margin统一调控安全距离。
ruby 标签本身不提供内置边距或安全距离，它的“边界”完全由基字（rb 或纯文本）和注音（rt）的排版逻辑决定；强行给 ruby 加 margin 或 padding 会破坏行内流布局，导致换行错位、对齐偏移，甚至在 Safari 中触发渲染异常。
ruby 元素默认没有外边距，但受行高与基线影响
浏览器不会给 ruby 自动添加 margin 或 padding，但它作为行内元素，高度由其内部基字内容和 rt 的垂直定位共同决定。常见问题包括：
- 多行文本中，
ruby块整体被拉高，挤压上下行间距 -
rt在 Safari 中默认不缩放、不居中，视觉上“贴顶”或“下沉”，造成与相邻文字间距不均 - 若基字是汉字+标点（如“你好！”），标点未包裹
ruby，会导致整行基线不一致，间距忽大忽小
解决方法不是加 margin，而是重置行内盒模型：
ruby {
line-height: 1.4; /* 避免因 rt 拉高整行 */
}
ruby rt {
font-size: 0.7em;
line-height: 1;
text-align: center;
}
为什么不能直接给 ruby 设置 padding 或 margin
因为 ruby 是行内格式化上下文（inline formatting context）中的特殊元素，它的尺寸计算不遵循普通块级或弹性盒子规则。一旦设置 padding：
-
padding-left/right会撑开行内宽度，可能引发意外换行（尤其在窄屏或小字号下） -
padding-top/bottom不生效——多数浏览器忽略对ruby的垂直内边距解析 -
margin在 Firefox 和 Chrome 中会被合并或截断；Safari 则可能完全无视margin并报 layout warning
真正可控的“安全距离”，应通过父容器的 line-height、font-size 和相邻段落的 margin-bottom 来统一调控。
需要留白时，应该操作哪里
当设计稿要求“拼音上方/下方留出 8px 空隙”或“整段注音文字左右缩进”，不要动 ruby 本身，而要分层处理：
- 单个字注音：靠
ruby rt { margin-top: 4px; }微调（仅限 Chrome/Firefox；Safari 需配合position: relative） - 整行注音区域：用包裹
<div class="ruby-line"><ruby>...</ruby></div>，再对.ruby-line设padding-top: 8px或margin-bottom: 12px - 响应式缩进：使用
em单位，如.ruby-line { padding-inline: 1em; }，避免像素固定导致小屏溢出
注意：ruby 内部不支持 box-sizing，也不响应 display: inline-block 的尺寸控制，任何试图把它当“可框定容器”的做法都会在 iOS WebView 或旧 Edge 中失效。
最易被忽略的一点：注音区域的“视觉安全距离”，本质是阅读节奏问题，不是像素数值问题。同一组 ruby 在 14px 和 16px 字号下，所需的行高缓冲完全不同；硬写 margin: 4px 只会让适配更脆弱。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
