行内元素的padding-top/bottom渲染但不参与布局计算是CSS规范限制，因其不生成独立盒模型，纵向空间由line-height决定；改用inline-block或inline-flex可启用完整盒模型并使padding生效。
行内元素的 padding-top/bottom 确实渲染了，但不参与布局计算
这不是 bug，是 CSS 规范对 display: inline 元素的明确限制：它的上下 padding 和 margin 仅在行框（line box）内部绘制，不会影响行高（line-height），也不会推挤父容器高度或相邻行位置。
用开发者工具选中一个 span 并设置 padding-top: 30px，你能看到背景色向上延伸——但父 div 的高度不变，下一行文字也纹丝不动。这是因为行内元素不生成独立盒模型，它的纵向空间完全由所在行的 line-height 决定，而不是自身 padding。
常见错误现象：
- 给
span加了padding-bottom: 20px，结果下面的文字被“顶上来”，看起来像遮挡 - 父容器设置了
background-color，但上下padding区域没显示背景，误以为没生效 - 调大
padding后发现行高没变，甚至内容被裁剪（尤其当line-height很小如1时）
为什么 display: inline-block 能解决这个问题
display: inline-block 让元素既保留在行内流中（不换行），又获得完整块级盒模型：所有 padding、margin、width、height 全部参与布局计算，父容器高度会被正常撑开。
但要注意几个实际细节：
-
vertical-align默认是baseline，可能造成基线对齐错位，建议显式设为middle或top - 多个
inline-block元素间存在默认空白符（空格/换行），会渲染成约4px间隙，可用font-size: 0或注释消除 - 它仍受父容器
line-height影响——如果父line-height过小，inline-block的顶部可能被裁剪，此时需同步调整父级line-height
替代方案：inline-flex 比 inline-block 更可控
display: inline-flex 是更现代的选择，它天然具备 flex 上下文，padding 行为稳定，且 vertical-align 不起作用（避免基线干扰），align-items: center 可轻松垂直居中。
使用时注意：
- IE11 不支持
inline-flex（但支持inline-block和flex） - 子项默认
flex-direction: row，若只放一个文本，无需额外设置 - 它不继承父容器的
line-height，因此不会因父级line-height过小而被裁剪
最容易被忽略的根源：line-height 才是纵向空间的真正控制者
很多人反复调 span 的 padding-bottom 却没效果，其实问题不在 padding，而在父容器的 line-height。哪怕你给 span 设 padding-bottom: 100px，只要父段落的 line-height: 1.2，那一行的高度就还是固定值——多出来的 padding 只能往邻近内容里“长”。
所以，排查顺序应该是：
- 先看父容器的
line-height是否合理（比如设为1.5或normal） - 再决定是否需要改
display类型；硬扛inline+ 死磕padding几乎没有胜算 - 如果只是装饰性留白（如带背景的关键词），优先考虑伪元素
::before/::after承载padding和尺寸，主文本保持纯inline
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
