行内非替换元素的 margin-top 和 margin-bottom 无效是 CSS 规范约定，因其在行内格式化上下文中无垂直布局空间；左右 margin 可生效，上下 padding 不影响行高；替换元素（如 img）则支持完整外边距。
行内元素设置 margin-top 或 margin-bottom 无效，不是 bug，而是 CSS 规范对行内盒（inline box）布局行为的明确约定。
行内元素不参与垂直方向的外边距计算
行内元素（如 span、a、strong、em 等）默认 display: inline，它们被设计为嵌入文本流中，按字符基线对齐。其垂直方向的空间由 line-height 和字体度量决定，而非 margin/padding 的盒模型空间。
- 上下 margin 不会推开相邻行或块级元素，也不影响行高
- 左右 margin 可以生效（但受文本流限制，可能被压缩或合并）
- 上下 padding 虽然能渲染（背景色可见），但不增加行高，也不改变其他内容位置
行内替换元素是例外
像 img、input、textarea 这类行内替换元素（inline-replaced elements），浏览器为其分配了独立的渲染框，因此支持完整的 margin 和 padding，包括 margin-top 和 margin-bottom。
-
- 这种偏移会影响所在行的整体高度，进而影响上下文排版
为什么不能直接改 margin 却要改 display？
根本原因在于：CSS 的 margin 属性只在“参与块格式化上下文（BFC）或行内格式化上下文（IFC）中具有尺寸控制权”的盒类型上才完整生效。行内非替换元素在 IFC 中没有独立的垂直布局空间。
立即学习“前端免费学习笔记（深入）”；
-
display: inline-block：创建一个独立的、可设宽高的行内级盒子，此时 margin-top/bottom 生效 -
display: block：脱离文本流，独占一行，完全支持所有 margin -
display: table-cell或flex子项等，也会激活新的盒模型行为
替代方案比硬改 margin 更合理
若目标只是调整文字垂直位置，用 vertical-align 或 line-height 往往更轻量、更符合语义：
-
vertical-align: top/middle/baseline/sub控制行内元素相对于父行框的对齐方式 -
line-height在父级p或div上设置，可统一控制多行文字间距 - 避免滥用
margin-top强推位置，否则易引发行高塌陷、换行错位等问题
