ruby标签默认无margin和padding；其行内特性导致直接设置padding/margin无效，需通过display:inline-block、vertical-align或调整line-height等上下文属性控制布局。
ruby标签默认有margin和padding吗
没有。ruby 标签本身在所有主流浏览器的用户代理样式表中**不带任何默认 margin 或 padding**。它是一个纯语义容器，渲染行为接近 span —— 行内、无盒模型干扰、不触发外边距折叠。
但实际看到“空隙”，往往来自三类干扰：
-
rb或rt内部文本的行高（line-height）或字体度量导致视觉偏移 - 父级块元素（如
p）自带的默认margin，让整段 ruby 看起来“被撑开” - 相邻行内元素（包括换行符、空格）产生的间隙，尤其当
ruby与其他span并排时
如何给ruby整体加内边距（padding）
直接对 ruby 设置 padding 无效 —— 因为它是行内元素，padding-top/padding-bottom 不生效（除非显式设为 display: inline-block 或 block）。
可行做法只有两种：
立即学习“前端免费学习笔记（深入）”；
- 把
ruby设为display: inline-block，再设padding：ruby { display: inline-block; padding: 2px 4px; }注意：这会破坏原有行内流布局，可能引发换行或对齐偏移 - 改用
rb和rt分别控制：rb可设padding-left/padding-right；rt可设padding全方向（它默认是行内块，部分浏览器支持）
调整ruby与周围文字的间距（margin）
ruby 是行内元素，margin-top/margin-bottom 同样不生效。真正影响垂直间距的是：
- 父容器的
line-height：增大它会让 ruby 上下留白变多 -
rt的top偏移（配合position: relative）：适合微调注音高度 - 用
vertical-align调整 ruby 整体在行框中的基线位置，例如：ruby { vertical-align: text-top; }
若必须加水平外边距，只能作用于 ruby 自身的 margin-left/margin-right，或包裹一层 span 再设 margin。
兼容性与常见坑
Chrome/Firefox/Edge 对 ruby 支持良好，但 Safari（尤其 iOS 16 之前）存在两个硬伤：
-
rt的font-size缩放失效，需强制写死（如font-size: 0.5em） -
ruby无法响应text-align: center居中，得靠父容器text-align+display: inline-block组合 - 所有浏览器中，
ruby都不继承父级的padding，也不参与 margin 折叠 —— 这既是限制，也是可控性的来源
真正要调的不是 ruby 的 margin/padding，而是它的渲染上下文：行高、字体大小、vertical-align 和 display 类型。漏掉其中任一环，都容易以为“样式没生效”。
