行内元素的 margin-top 和 margin-bottom 不生效是 css 规范明确限制，仅水平外边距有效；垂直方向被完全忽略，需改用 inline-block 等显示类型实现垂直间距。
行内元素的 margin-top 和 margin-bottom 不生效，不是 bug，而是 CSS 渲染引擎对行内盒（inline box）的明确限制——它根本不会解析这两个方向的外边距。
行内元素的外边距只在水平方向起作用
浏览器对行内元素（如 <span></span>、<a></a>、<strong></strong>）生成的是「行内盒」，它的布局逻辑和块级盒完全不同：
- 垂直方向（
margin-top/margin-bottom）被完全忽略，连计算都不参与 - 水平方向（
margin-left/margin-right）可以正常设置并影响相邻行内元素间距 - 即使强制写上
margin: 20px，实际生效的也仅有左右两个值，上下会被静默丢弃 - 这个行为在所有主流浏览器中一致，是 CSS 2.1 规范明确定义的
为什么不能像块元素那样撑开行高？
行内元素不构成独立的「块格式化上下文」，它的定位依附于所在行框（line box）。而行框的高度由其内部所有行内盒的 line-height、字体大小、vertical-align 等共同决定，margin 不在参与计算的属性列表里：
-
line-height控制行框基线间距，不是「高度」，但实际撑开视觉空间 -
vertical-align决定该行内盒在行框中的垂直对齐位置（如top、middle、baseline） - 想让行内元素“看起来”有上下空隙，只能靠调整
line-height或套一层display: inline-block的容器
box-sizing 对行内元素无效
box-sizing 属性只对「可设置宽高的元素」起作用，而标准行内元素天生不接受 width、height、margin-top、margin-bottom —— 所以无论设成 content-box 还是 border-box，都毫无意义：
- 给
<span></span>设置box-sizing: border-box不会改变任何渲染结果 - 只有当元素变成
display: inline-block或display: block后，box-sizing才开始参与尺寸计算 - 此时它就不再是纯行内盒，而是「行内块盒」或「块盒」，盒模型行为完全切换
替代方案：什么时候该换 display 类型？
如果你需要对某个本是行内的元素施加垂直外边距，说明它在语义或布局上已经承担了「独立占位」职责，这时候应该主动改变其显示类型：
- 用
display: inline-block：保留水平流式特性，同时支持margin、padding、width、height - 用
display: inline-flex：适合需内部弹性布局的行内组件（如带图标的按钮文字） - 避免滥用
display: block+float或position: absolute，它们会破坏文档流，带来额外维护成本
真正容易被忽略的点是：行内元素的「不可垂直外边距性」不是兼容性问题，而是规范强制行为。试图用 hack 强行绕过（比如嵌套 div、滥用 transform: translateY）反而会让布局更难预测和调试。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
