行内元素的上下margin和padding不撑开空间是css规范行为，因其只参与行框布局、不生成独立盒模型；改用display: inline-block或inline-flex可解决，但需注意vertical-align、line-height及间隙问题。
行内元素的 margin-top、margin-bottom、padding-top、padding-bottom 不撑开空间，不是写错了，也不是浏览器问题——是 CSS 规范明确规定的盒模型行为。
为什么行内元素的垂直 margin 和 padding 看起来“不生效”
根本原因是：行内元素（如 span、a、strong）只参与「行框（line box）」布局，不生成独立的块级盒模型。它的垂直方向内边距和外边距确实被解析，但不会影响行高计算，也不会推开相邻元素或撑大父容器。
用 background-color 可验证：上下 padding 区域没有背景色，说明未渲染为可占位空间；margin-top 设再大，相邻元素位置也不变。
- 左右方向的
margin和padding通常可见（但可能被父容器裁剪或与其他行内元素重叠） - 真正控制垂直视觉间距的是
line-height，它作用于整行，而非单个行内元素 -
width和height同样对普通行内元素无效（替换元素如img是例外）
display: inline-block 是最常用且稳妥的修复方式
把 display 改成 inline-block 后，元素既保留在当前行内流中（不换行），又获得完整盒模型：所有 padding、margin、width、height 全部生效。
- 兼容性极好，IE8+ 均支持
- 注意默认
vertical-align: baseline，多个inline-block元素容易因基线对齐产生底部空白，建议显式设vertical-align: middle或top - HTML 换行/空格会在多个
inline-block元素间产生约 4px 间隙，可用font-size: 0在父容器上清除，再在子元素里重置font-size
示例：
span.tag {
display: inline-block;
padding: 4px 8px;
background: #eee;
border-radius: 3px;
vertical-align: middle;
}
inline-flex 更适合需要内部对齐的场景
当你需要在行内元素里居中图标+文字、控制子元素间距，或者希望 padding 响应更稳定时，display: inline-flex 比 inline-block 更可控——它自带 flex 上下文，不用额外包裹容器。
- 支持
align-items、justify-content等属性，垂直居中更直接 - 同样保留行内流位置，不破坏文档流
- 注意兼容性：IE 不支持
inline-flex，Edge 12+、Chrome 21+、Firefox 20+ 支持
别误用 line-height 当作 padding 替代方案
line-height 能让文字看起来“上下有空”，但它只是拉高行框，并不给元素自身增加可交互区域。比如点击目标太小、背景色无法覆盖上下空白、hover 区域仍只有文字高度——这些都说明 line-height 解决不了真正的留白需求。
如果你的目标是让文字周围都有可点击/可交互的空白区，仅靠 line-height 不够，必须改显示模式。最容易被忽略的一点是：inline-block 或 inline-flex 改动后，要同步检查 vertical-align 和父容器的 line-height 是否引发新的对齐错位。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
