css规范明确忽略inline元素的margin-top/margin-bottom，非浏览器bug；display:inline-block可启用完整盒模型，但需注意vertical-align、基线间隙及html空白等副作用。
inline 元素的 margin-top/margin-bottom 被规范忽略，不是浏览器 bug
你写的 margin-top: 20px 确实被解析了，但在计算布局时直接被丢弃——CSS 规范明确要求对 display: inline 元素忽略垂直外边距。这不是某个浏览器的缺陷，也不是缓存或优先级问题，而是所有现代浏览器都必须遵守的规则。
典型现象包括：span、a、strong 这类元素设了上下 margin 后，相邻行位置不变、行高不变、Computed 面板里该值被划掉。左右 margin 却照常生效，因为 inline 元素只在行内水平方向参与布局。
为什么 display: inline-block 是最常用解法
display: inline-block 让元素既保持同行排列，又启用完整盒模型：所有 width、height、padding、margin 都可生效，且 IE8+ 全面支持，无需 polyfill。
但要注意副作用：
- 默认
vertical-align: baseline会在父容器底部留下约 4px 空隙（非 margin，是基线到行框底边的距离） - 若父容器无其他内容，可能因子元素
inline-block导致高度塌陷 - 多个
inline-block元素间会保留 HTML 换行/空格产生的间隙（可用font-size: 0或注释消除）
vertical-align 不是“对齐方式”，而是影响布局的关键开关
一旦改用 inline-block，vertical-align 就不再只是视觉微调，它直接决定该元素如何与当前行框对齐，进而影响整行高度和周围元素位置。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
常见误判：
- 把底部空隙当成
margin-bottom无效，实际是baseline对齐导致 - 设了
vertical-align: middle却发现没居中，因为 middle 是相对于父元素的 x-height（不是 height），需配合line-height或显式高度才稳定 - 混用
inline-block和img时，img默认也是baseline，不统一vertical-align值会导致错位
别在 inline 元素上写 margin-top/margin-bottom 还期待它起作用
这是最容易被反复踩的坑：调试半天发现样式没生效，最后发现只是写错了 display 类型。与其花时间查优先级、清缓存、看 computed，不如先确认元素当前的 display 值。
如果不能改 display（比如受限于第三方组件封装），可临时用这些替代：
-
padding-top/padding-bottom：有效，但会撑大背景和边框范围 -
transform: translateY()：纯视觉偏移，不影响文档流和其他元素布局 -
line-height：仅适用于单行文本，通过拉高行框间接制造上下空间
真正麻烦的从来不是“怎么加间距”，而是加完之后，它和周围文字、图片、行高之间的关系突然变得不可控——这些细节比改一个 display 值更消耗时间。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
