CSS规范明确规定行内元素（如span、a、strong）的margin-top和margin-bottom被解析但忽略，因其不参与垂直布局流；解决方法是改display为inline-block（保留行内流且支持完整盒模型）、block（独占一行）或table-cell（精细对齐）。
margin-top 和 margin-bottom 对行内元素（如 span、a、strong）根本不起作用——这不是 bug，是 CSS 规范定义的行为。
为什么 inline 元素的 margin-top/margin-bottom 看似无效
行内元素不参与块级格式化上下文的垂直流布局，它的垂直方向（上下）外边距不会影响行高或相邻行的位置。你设了 margin-top: 20px，浏览器会解析它，但不会渲染出空白；实际效果常被误认为“失效”，其实是被忽略了。
常见混淆点：
- 把文字基线（baseline）对齐产生的视觉空隙当成
margin-bottom生效 - 给
img或span设了vertical-align后发现位置变了，误以为是 margin 起了作用 - 用开发者工具看到 computed 样式里有
margin-top值，就以为它该起效
想控制行内元素上下间距，真正有效的办法
必须改变显示模式，让元素能参与垂直方向的盒模型计算：
立即学习“前端免费学习笔记（深入）”；
-
display: inline-block：最常用，保留行内流特性的同时支持完整margin和padding -
display: block：适合需要独占一行的场景，此时margin-top/margin-bottom完全生效，但会破坏原有行内布局 -
display: table-cell：配合vertical-align更精细控制对齐和垂直空间，但语义和兼容性需权衡
示例：span.highlight { display: inline-block; margin-top: 4px; margin-bottom: 4px; }
别踩坑：这些操作不会解决问题
以下写法看似合理，实际无效或引发新问题：
- 直接在
span上写margin-top: 10px—— 不渲染，白设 - 给
span加line-height试图“撑开”上下空间 —— 影响整行高度，可能波及同级其他行内元素 - 用负
margin-top把元素往上拉 —— 依然无效，且可能触发意外重绘 - 给父容器设
padding-top/padding-bottom来“间接”影响 —— 这是作用于整个容器，不是针对该行内元素本身
什么时候该考虑改结构而不是硬调 margin
如果你频繁需要为多个 span 设置上下间距，说明语义或结构可能不合理：
- 文本标注类需求（如高亮、脚注），优先用
inline-block+ 显式尺寸 - 按钮、图标等交互元素，本就不该用纯
inline，应默认用inline-block或button标签 - 需要精确垂直居中或对齐时，
vertical-align必须配合line-height或父容器高度，单独靠 margin 无解
真正难的不是“怎么加 margin”，而是判断这个元素是否本就该是 inline —— 很多时候，display: inline-block 是更诚实、更可控的选择。
