span的上下padding不撑开父元素高度，因其仅在行框内绘制、不参与行高计算；改用inline-block可获完整盒模型，或调整line-height控制行间距。
因为行内元素（span、a、strong等）的 padding-top 和 padding-bottom 本就不参与行框（line box）高度计算，只在当前行框内部“绘制”，所以不会推开上/下行内容——这不是 bug，是 CSS 规范对 display: inline 的明确定义。
行内元素的上下 padding 确实渲染了，但不占布局空间
你给 span 加 padding-top: 30px，背景色会向上延伸，开发者工具里也能看到 computed 值生效；但它不会：
- 推高父容器的 clientHeight 或 offsetHeight
- 拉开相邻行之间的距离（即不改变 line-height）
- 影响下一行文字的 baseline 位置
原因在于：行框高度由该行所有内联盒子中「最高者」（含幽灵空白节点 strut）和继承来的 line-height 共同决定，单个 span 的上下 padding 不计入这个计算过程。
为什么 inline-block 能解决这个问题
display: inline-block 让元素获得完整盒模型，此时 padding-top/padding-bottom 会真实增加自身高度，并可能间接撑开父容器（尤其当父容器高度由内容撑起时）。但要注意：
- 默认 vertical-align: baseline 容易导致底部对不齐，建议显式设为 vertical-align: top 或 middle
- HTML 中的换行或空格会在相邻 inline-block 元素间生成约 4px 间隙，可用 font-size: 0 在父级清除，再在子元素中重置 font-size
- line-height 仍会影响其垂直对齐参考线，不是完全脱离行内上下文
别用 padding 控制行间距，改用 line-height
如果你只是想让某段文字看起来离上下行更远，不要碰 span 的上下 padding，直接调整它所在行的 line-height：
- span { line-height: 2 } 本身无效，但若它所在的块容器（如 p）设置了 line-height: 2，整行就会变高
- 行高取该行所有内联元素中最大的 line-height（包括未显式设置但继承来的幽灵节点）
- 若需局部微调，可配合 vertical-align: top 做视觉偏移，但效果受字体度量影响，不够稳定
真正容易被忽略的是：即使加了 inline-block，它的行为依然受制于行内格式化上下文（IFC）——vertical-align、line-height、white-space 这些才是它的控制开关，不是宽高或 margin/padding。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
