行内元素的padding-top/padding-bottom不撑开行高是CSS规范行为，因其只参与行框布局、不生成独立盒模型；改用display:inline-block或inline-flex可使垂直padding生效，但需注意vertical-align、HTML空白间隙等问题。
行内元素（如 span、a）设了 padding-top 和 padding-bottom 却不撑开行高，不是写错了，也不是浏览器 bug——是 CSS 规范明确限制的行为。必须改 display 值才能让垂直 padding 参与布局计算。
为什么 padding-top/padding-bottom 在 display: inline 元素上“不顶事”
行内元素不生成独立盒模型，只参与「行框（line box）」排布。它的上下 padding 会被渲染（比如加 background-color 能看到区域扩大），但不会影响行框高度，也不会推开相邻文字或改变父容器高度。
常见错误现象：
-
span加了padding: 8px 12px，左右有空隙，上下完全没反应 - 开发者工具里
padding-top值存在，但盒模型图中垂直方向无占位 - 父容器设了
overflow: hidden，再加大padding-top，顶部背景被裁切——说明 padding 确实存在，只是不推内容
用 display: inline-block 让 padding 完全生效的关键点
这个值既保留行内流位置（不换行），又赋予完整块级盒模型，所有 padding、margin、width、height 都可控制。但它不是“设了就完事”，有几个实际坑要绕开：
立即学习“前端免费学习笔记（深入）”；
- 默认
vertical-align: baseline，多个inline-block元素会因基线对齐产生底部空白，建议显式写vertical-align: middle或top - HTML 换行/空格会在相邻
inline-block元素间生成约 4px 间隙，可用父容器font-size: 0+ 子元素重置font-size消除 -
line-height仍作用于父容器，可能干扰inline-block的垂直对齐参考线，尤其当子元素含文本时 - IE8+ 兼容良好，但 IE6/7 对块级元素需额外写
display: inline; zoom: 1
inline-block 和 inline-flex 选哪个
如果只是要让 padding 上下生效、加个背景色标签，inline-block 更轻量、兼容性更好；如果内部还要居中图标+文字、控制子项间距，或希望 padding 行为更稳定（比如不依赖 vertical-align），直接上 inline-flex 更省心。
关键差异：
-
inline-block的基线由最后一行内联内容决定，易受字体、line-height干扰 -
inline-flex的基线由 flex 容器主轴起点（通常是顶部）和align-items共同决定，更可控 -
inline-flex的padding-top/padding-bottom会真正推挤相邻行内内容，而inline-block不会——这点在混排文本时特别明显
最常被忽略的是：即使改成 inline-block，若没处理 vertical-align 或 HTML 空白，视觉错位依然会发生。别只盯着 padding 写没写对，得看它在行框里到底跟谁对齐、被什么挤着。
