行内非替换元素的 margin-top/margin-bottom 无效是 css 规范定义行为，仅 margin-left/right 生效；替换元素（如 img）和 display 改为 inline-block/flex 后上下 margin 才生效。
行内元素的 margin-top/margin-bottom 被浏览器静默忽略
这不是 bug，也不是兼容性问题，而是 CSS 2.1 规范明确定义的行为：display: inline 元素生成的是「行内盒」（inline box），它不参与垂直方向的布局计算。浏览器解析到 margin-top 或 margin-bottom 时，会直接丢弃，连 layout 阶段都不进入。
你可以用开发者工具看到样式被标记为“已应用”，但 computed 值里 margin-top 和 margin-bottom 永远是 0px —— 因为它们压根没被计算。
而 margin-left 和 margin-right 是有效的，它们会影响该行内盒在行框（line box）中的水平位置，推开相邻的行内内容（比如文字、其他 span）。
为什么左右 margin 能生效，上下却不能？
根本原因在于行框的布局逻辑：
- 行框高度由
line-height、字体大小、vertical-align共同决定，不是靠子元素的 margin 推出来的 -
margin-left/margin-right属于「行内盒的水平定位参数」，浏览器会用它们调整盒在行内的起始/结束偏移 -
margin-top/margin-bottom不在行内盒的布局属性列表中，规范里就没给它们留位置 - 即使你写
margin: 20px，实际只取左右两个值；上下值不会报错，也不会渲染，只是被跳过
哪些元素上下 margin 实际能生效？
不是所有“看起来像行内”的元素都受这个限制：
-
<img>、<input>、<textarea></textarea>等「行内替换元素」（replaced inline elements）：上下margin全部生效，因为它们有固有尺寸和独立盒模型 -
<span></span>、<a></a>、<strong></strong>等「非替换行内元素」：上下margin无效，仅左右有效 - 一旦改了
display，比如display: inline-block或display: inline-flex，就不再是纯行内盒，上下margin立刻生效
别用 padding-top/bottom 试图“绕过”这个问题
很多人试过给 span 加 padding-top，发现背景色没撑开、下面文字也没被推开——这也是规范行为。行内元素的 padding-top/padding-bottom 不影响行框高度，只可能让背景色在基线附近“浮”一小块（且常被裁剪）。
真正可控的替代方式只有两类：
- 改显示类型：
display: inline-block（最常用），注意加vertical-align: middle避免基线对齐导致的空白 - 换布局模式：父容器设
display: flex，用gap控制子项间距，完全绕开 margin 语义
最容易被忽略的一点是：当你反复调试一个 span 的上下间距却始终无效时，问题不在写法，而在你把它当成了“可独立占位的单元”——而它的原始设计定位只是“文本流里的样式修饰符”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
