行内元素的 padding-bottom 会延伸至基线以下区域，因 vertical-align: baseline 对齐导致与邻近文字视觉重叠，并不撑开行高；真正解决需改用 inline-block、inline-flex 或伪元素，或调整 line-height。
行内元素的 padding 为什么看起来“压住”了邻近文字？
不是遮挡，是基线对齐导致的视觉重叠。行内元素（如 span、a）默认按 vertical-align: baseline 对齐，而它的 padding-bottom 会向下延伸到基线以下区域——这个区域本就属于行高（line-height）的预留空间，邻近的文字“站”在同一条基线上，自然会被这块 padding “顶上去”或“挤进来”，造成错觉上的遮挡。
padding 生效但不“隔离”的真实表现
行内元素的 padding 水平方向（padding-left/padding-right）确实生效，但它的上下 padding 不参与布局推挤，只影响自身盒内渲染范围：
-
padding-top和padding-bottom会渲染出来，但不会撑开行高，也不会推开上/下行文字 - 相邻行内元素的底部 padding 可能和下一行文字的 ascender（如 “h”、“d” 的上伸部分）发生视觉交叠
- 用开发者工具选中元素，能看到 padding 区域实际存在，只是它“浮”在行盒内部，不改变行盒高度
- 若父容器
line-height较小（比如line-height: 1），这种交叠会更明显
真正可控的替代方案：别硬扛行内盒模型
想让文字周围有稳定留白且不干扰排版，就别依赖行内元素的 padding：
- 把
span改成display: inline-block—— 它能完整响应padding，且vertical-align可控（比如设为middle避免基线问题） - 用
display: inline-flex替代：自带 flex 上下文，padding行为稳定，align-items: center轻松垂直居中，vertical-align失效也不影响 - 如果只是加背景色/边框类装饰，用伪元素
::before/::after承载padding和尺寸，主文本保持纯行内流，互不干扰
最容易被忽略的一点：行高才是幕后推手
很多人调了半天 padding，却没碰 line-height。行内元素的纵向空间完全由所在行的 line-height 决定，而不是它自己的 padding 或 height。哪怕你给 span 设置了 padding-bottom: 20px，只要父段落的 line-height: 1.2，那一行的高度就不会变——多出来的 padding 就只能往邻近内容里“长”。所以，检查并合理设置 line-height，比死磕行内元素的上下 padding 更治本。
立即学习“前端免费学习笔记（深入）”；
