css 为什么 padding 上下不生效_行内元素盒模型问题解析

行内元素的 padding-top/padding-bottom 确实生效，但不撑开父容器高度、不影响行高和行框高度，仅在行框内绘制；推荐用 display: inline-block 解决。

行内元素的 padding-top / padding-bottom 看似不生效？其实是生效了

它确实生效了，但不会撑开父容器高度，也不会影响其他行内元素的垂直排版位置——这是由 display: inline 的盒模型渲染规则决定的，不是 bug，是规范行为。

为什么 padding-top/bottom 对 、 这类元素“没效果”

根本原因是：行内元素的上下 padding 和 margin 不参与行高（line-height）计算，也不改变行框（line box）的高度。它们只是「画在行框内部」，可能被上一行或下一行内容覆盖，视觉上像没起作用。

• padding-top 会从内容区向上延伸，但若父容器 line-height 不够，就会被裁剪或重叠
• 上下 padding 不会推动相邻行的位置，所以不会“拉开行距”
• 左右 padding 正常生效，因为行内元素水平方向天然支持内边距扩展

怎么让上下 padding 可见且可控

有三个可靠解法，按推荐顺序排列：

• 把元素改为 display: inline-block —— 最轻量，保留行内流特性，同时获得完整盒模型控制权
• 改用 display: inline-flex 或 display: inline-grid（需确认浏览器兼容性）
• 强行用 vertical-align: top/middle/bottom 配合 line-height 调整对齐基准线，但治标不治本，易受字体、字号干扰

span.highlight {   display: inline-block;   padding: 8px 12px;   background: #ffeb3b; }

容易忽略的关键细节

即使加了 inline-block，仍要注意：vertical-align 默认是 baseline，可能导致元素底部和文字基线对不齐，产生意料外的空白；line-height 设置在父容器上时，依然会影响 inline-block 元素的垂直对齐参考位置；另外，font-size: 0 在父级清空间隙的 hack 会影响 inline-block 子元素的 em 单位计算。

立即学习“前端免费学习笔记（深入）”；