行内元素的margin-top/margin-bottom无效是CSS规范强制行为，非bug或书写错误；浏览器解析但静默忽略上下值，仅左右margin参与布局，垂直方向不进入行框计算流程。
行内元素（如 <span>、<a>、<strong>）的 margin-top 和 margin-bottom 无效，不是浏览器 bug，也不是 CSS 写错了，而是规范强制不参与布局计算 —— 它们压根不会被解析进行框（line box）高度逻辑里。
为什么 margin-top/margin-bottom 在 inline 元素上完全没用
CSS 2.1 规范明确定义：对 display: inline 元素，垂直外边距必须被忽略。浏览器确实会解析你写的 margin: 20px，但只取左右值；上下值在布局阶段就被静默丢弃，连“是否生效”的判断都不进入流程。
- Computed 面板里能看到
margin-top值，但旁边带删除线（strikethrough），表示未参与计算 - 即使父容器有
line-height: 30px，margin-bottom: 50px也不会把下一行往下推 -
padding-top/padding-bottom能渲染背景和边框，但不撑开行高，可能造成文字重叠 -
box-sizing对纯 inline 元素完全无效 —— 它连width和height都不接受，哪来的“content-box”可选？
想加垂直间距，哪些方案真正可控
别在 display: inline 上硬扛垂直 margin。根据实际需求选合适路径：
- 要保留同行排列 + 完整盒模型 → 改用
display: inline-block，再设margin-top/margin-bottom - 要避免 HTML 空格间隙 → 父容器加
font-size: 0，子元素重设font-size - 要统一控制多元素间距且不依赖 margin → 父容器改
display: flex+gap - 临时视觉偏移（不影响文档流）→
transform: translateY(10px) - 单行文本微调 → 用
line-height拉高整行，或vertical-align: middle配合足够高的line-height
inline-block 的 vertical-align 不是“可选项”，是关键开关
一旦用了 display: inline-block，vertical-align 就从“微调对齐”变成“决定布局位置”的核心属性。默认 baseline 会导致底部莫名空出 4px（非 margin，是基线到行框底边的距离）。
立即学习“前端免费学习笔记（深入）”；
- 空
<button></button>和含文字的按钮错位，大概率是vertical-align: baseline在作祟 -
vertical-align: middle不是相对于父容器高度居中，而是相对于 x-height（小写字母 x 的高度），需配合显式line-height或height才稳定 - 最稳妥通用解法：统一设
vertical-align: top或vertical-align: bottom，避开基线计算歧义
真正容易被忽略的点是：这个限制不是兼容性问题，也不是缓存或优先级导致的“看起来没生效”。它发生在渲染流水线最底层 —— 垂直 margin 根本没机会进入 layout phase。所以调试时，第一反应不该是“为什么没生效”，而应是“它本来就不该生效”。
