行内元素的padding-top和padding-bottom不影响父元素高度，因其不参与ifc布局计算；改用inline-block可使padding参与布局，但需确保父容器自身有高度。

行内元素的 padding-top 和 padding-bottom 确实被解析、渲染，甚至能通过 background-color 看到区域扩大，但它不会撑开父元素高度——这不是 bug，是 CSS 规范对 IFC（Inline Formatting Context）的明确约束。

行内元素不参与父容器高度计算

块级元素的高度由内容撑开，而行内元素（如 span、a）在文档流中只生成「行框（line box）」，不构成独立盒模型。父容器计算自身 height 或 min-height 时，完全忽略行内子元素的垂直内边距。

• 即使 span 设了 padding-top: 40px，父 div 的 offsetHeight 仍只取决于其 line-height 和文本内容行数
• 用 getBoundingClientRect().height 查父容器，结果也不会包含子元素的上下 padding
• 但 scrollHeight 会把这部分 padding 算进去——它影响滚动范围，不参与布局高度

为什么 background-color 能看到，但高度没变？

上下 padding 在行框内部绘制，属于「视觉渲染层」，而非「布局占位层」。你可以把它理解为：浏览器画了一块红色背景向上延伸，但没告诉父容器“我多占了 40px 高度”。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• padding-top 向上延伸，可能被上一行文字覆盖，或被父容器 overflow: hidden 裁掉
• padding-bottom 向下延伸，若下一行 line box 间距不够，就会重叠而非推开
• 左右 padding 没这个问题，因为行内流水平方向天然支持内边距扩展

display: inline-block 是最直接的修复方式

改 display: inline-block 后，元素获得完整盒模型，所有 padding、margin、width、height 都参与布局计算，父容器高度自然被撑开。

• 注意默认 vertical-align: baseline，多个 inline-block 元素容易因基线对齐产生底部空白，建议显式写 vertical-align: middle
• HTML 中换行或空格会在相邻 inline-block 元素间插入约 4px 间隙，可用父容器设 font-size: 0 + 子元素重置 font-size 消除
• line-height 仍作用于父容器，会影响 inline-block 的垂直对齐参考线，尤其当子元素含文本时

别误用 line-height 替代 padding

有人试图用增大父容器 line-height 来“模拟”上下 padding 效果，这本质是调整行框高度，不是给元素本身加内边距。它会导致所有行内内容整体拉高，无法单独控制某个 span 的上下留白。

• line-height 作用于整行，不是单个元素；padding 才是元素自身的内边距
• 若父容器有多行文本，调大 line-height 会无差别撑开所有行，易引发错位
• 真正需要局部垂直留白时，inline-block + 显式 padding 是唯一语义清晰、可控的路径

最常被忽略的一点：即使你用了 inline-block，如果父容器本身因浮动、绝对定位或 flex 项目未设 align-items 而高度塌陷，padding 依然“看不见”——得先确保父容器有真实高度，再谈子元素如何撑它。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！