display: inline-block 的 margin-top“看起来无效”是因为 vertical-align: baseline 导致盒子被拉回对齐，实际已生效；真正起作用需显式设置 vertical-align（如 top/middle）并避免 line-height 和混排元素干扰。
display: inline-block 的上下 margin 为什么“看起来无效”
因为默认 vertical-align: baseline，不是 margin 失效，而是视觉上被基线对齐“吃掉”了位移。元素的 margin-top 确实生效了，但它只是把整个 inline-block 盒子向上推，而该盒子又因 baseline 对齐，被拉回和其他行内内容对齐，造成“没动”的错觉。
怎么让 inline-block 的 margin-top / margin-bottom 真正起作用
核心是打破 baseline 对齐带来的视觉干扰：
- 显式设置
vertical-align为top、middle、bottom或具体数值（如vertical-align: -4px） - 确保父容器没有意外的
line-height干扰（尤其当父级是font-size: 0或超大line-height时） - 避免父容器中混入其他未对齐的行内元素（比如纯文本、
img、span），它们会参与同一行的基线计算
margin-bottom 在 inline-block 上的特殊行为
margin-bottom 不像 margin-top 那样容易被 vertical-align 掩盖，但它的实际效果仍受行高约束：
- 它会影响当前行的“行盒高度”，进而可能撑开父容器高度
- 如果父容器
line-height很小，margin-bottom可能被截断或不渲染（尤其在旧版 Safari 中） - 多个
inline-block元素并排时，它们各自的margin-bottom不会合并——这点和块级元素完全不同
对比 block 和 inline-block 的 margin 行为差异
关键区别不在 margin 本身是否“支持”，而在它们所处的格式化上下文：
-
display: block：参与 BFC，上下 margin 完全自由，可触发 margin 合并（collapse） -
display: inline-block：参与 IFC，上下 margin 始终存在，但位移受vertical-align和line-height联合控制，且永不合并 -
display: inline：上下 margin 确实被忽略（规范定义），只响应左右 margin
真正容易被忽略的是：哪怕你把 inline-block 的 margin-top 设成 100px，只要 vertical-align 还是 baseline，它大概率还是贴着旁边文字底部——这不是 bug，是 IFC 的必然表现。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
