ruby无默认margin，其“上下空隙”源于inline特性受父line-height影响、rt自身font-size与line-height撑高整行，以及兄弟元素（如p/h2）的默认margin被误归因；解决需控制line-height、vertical-align及rt样式，而非重置margin。
ruby 标签本身没有浏览器 UA 默认外边距（margin），但它的默认行内行为、line-height 和嵌套的 rt 元素会制造视觉“间距”，常被误认为是外边距问题。
为什么 ruby 看起来有“上下空隙”
根本原因不是 ruby 自身带 margin，而是：
• ruby 是 display: inline 元素，受父容器 line-height 影响，基线对齐时预留了容纳 rt 的垂直空间
• rt 默认 font-size: 50% 且有自身 line-height，其上下空白会撑开整行高度
• 若 ruby 前后是段落或标题（如 p、h2），这些兄弟元素的默认 margin 会被误归因于 ruby
清除 ruby 视觉“外边距”的实际手段
重点不在重置 ruby { margin: 0 }（它本来就是 0），而在于控制行高与对齐：
• 给 ruby 设置 line-height: 1 或具体数值（如 line-height: 1.2），避免继承过大的父级行高
• 强制 ruby 使用 vertical-align: text-bottom 或 top，减少基线对齐带来的浮动间隙
• 对 rt 单独设 margin: 0; padding: 0; line-height: 1;，防止其内部撑开空间
• 若需紧贴文字，可加 ruby { display: inline-block; } 并配合 vertical-align: bottom; 微调
别踩通配符重置的坑
* { margin: 0; padding: 0; } 对 ruby 完全无效——它不解决行高和对齐问题，反而会让 p、h1 等真正带默认 margin 的元素失去结构间距，导致文本糊成一团。更糟的是，某些旧版 Safari 对 ruby 的 display 行为支持不稳定，盲目加 box-sizing 或 float 可能引发换行错位。
真正要调的从来不是“清除外边距”，而是理解 ruby 的行内渲染模型；一旦 line-height、vertical-align 和 rt 的尺寸稳定下来，所谓“默认外边距”就自然消失了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
