行内元素的 padding 渲染正常，但 padding-top/bottom 不影响行高和相邻文字排布；因其垂直对齐基于基线且 line box 高度由内容区决定；需改用 inline-block 才能实现垂直方向布局影响。
行内元素的 padding 确实生效，但视觉上常被误解为“没用”
根本原因不是 CSS 不支持，而是行内元素的盒模型受制于「行内格式化上下文（IFC）」——它的 padding 会撑开背景和边框，但不会影响行高或相邻文字的垂直排布。你看到的“没效果”，其实是它没推挤其他内容，而非没渲染。
display: inline 元素的 padding-top 和 padding-bottom 为什么看起来“不顶事”
因为 IFC 中，行内盒子的垂直对齐基于基线（baseline），padding-top 向上扩展的是该元素自身的背景区域，但所在行框（line box）的高度由其中最高盒子的内容区（content area）决定，而非 padding 区域。结果就是：背景/边框变大了，但文字没被“抬高”，也不挤压上下行。
-
padding-left/padding-right始终有效，能推开左右邻近的行内内容 -
padding-top/padding-bottom渲染正常，但仅作用于自身背景与 border，不影响 line box 高度 - 若需真正撑开垂直空间，必须让元素脱离 IFC —— 比如改用
display: inline-block或display: inline-flex
验证 padding 是否真生效：三步快速确认
别只靠肉眼判断是否“推开了文字”，要观察渲染层：
- 给元素加显眼的
background-color和border，再设padding: 10px，能看到背景/边框确实扩大了 - 用浏览器开发者工具悬停检查，确认 computed 样式中
padding-top等值已正确应用 - 把父容器设为
overflow: hidden，再加大padding-top，如果顶部背景被裁切，就证明 padding 真的存在并溢出了
什么时候必须避开 display: inline 改用 inline-block
当你需要 padding 在垂直方向产生布局影响时，inline 就不够用了。典型场景包括：
立即学习“前端免费学习笔记（深入）”；
- 带背景色的关键词标签（tag），要求上下留白且不破坏行高一致性
- 图标 + 文字组合中，想用 padding 统一控制图标和文字间距
- 下划线样式需通过
padding-bottom抬高文字以避免压线，此时inline的 padding-bottom 无效，inline-block才行
记住：inline-block 保留了行内级流式特性，同时获得完整盒模型控制权——这是解决这类问题最轻量、兼容性最好的方式。
