padding 在 inline 元素上下方向视觉无效，因不生成独立盒模型；改用 inline-block、flex 子项或设置 box-sizing: border-box 可解决。
padding 在 inline 元素上不生效
这是最常见也最容易被忽略的情况：padding 对 display: inline 元素（如 、）的上下方向（padding-top / padding-bottom）**视觉上无效**——不是没加，而是浏览器根本不渲染它占据的空间，文字行高不会因此撑开。
- 左右方向的
padding通常能显示，但可能被父容器裁剪或与其他内联元素重叠 - 根本原因是：inline 元素只参与行框（line box）布局，不生成独立的块级盒模型，
padding不影响行高计算 - 验证方式：给 inline 元素加
background-color，会发现上下 padding 区域没有背景色
display: inline-block 是最稳妥的替代方案
把 display 改为 inline-block，既能保持水平排列，又能让 padding 完全生效（上下左右都起作用），且不会像 block 那样强制换行。
- 注意默认有空白间隙：多个
inline-block元素间会因 HTML 换行/空格产生约4px间隙，可用font-size: 0或注释掉换行来消除 - 若需垂直对齐，用
vertical-align: middle（默认是 baseline，容易错位） - 兼容性极好，IE8+ 均支持
.btn {
display: inline-block;
padding: 8px 16px;
vertical-align: middle;
}
flex 容器中 padding 生效但需注意父级约束
当元素是 display: flex 容器的子项时，padding 本身一定生效，但常被误认为“不生效”，实际是父容器的 align-items 或子项的 margin 干扰了视觉效果。
-
align-items: stretch（默认）会让子项拉伸填满容器高度，此时 padding 看起来被“吞掉”了 - 如果子项设置了
height或min-height，padding 会向外撑开，但可能溢出或触发滚动 - 推荐显式设置
align-items: flex-start或align-items: center来明确控制对齐
box-sizing 被忽略导致 padding “吃掉”宽度
默认 box-sizing: content-box 下，width 和 padding 是相加关系。比如设了 width: 100px + padding: 10px，最终元素总宽是 120px，可能超出预期容器，造成布局错乱，让人误以为 padding “没加进去”。
- 全局修复建议：在 CSS 开头加
* { box-sizing: border-box; } - 单独修复：对目标元素加
box-sizing: border-box，此时width包含 padding 和 border - 特别注意表单控件（
、）默认是content-box，且部分浏览器不继承box-sizing，需单独设置
padding 是否生效，本质是看元素是否拥有可渲染的盒模型空间。inline 元素天生缺这个空间，强行加 padding 只是“画在空气里”。真正要改的不是 padding 值，而是 display 类型或父容器的布局逻辑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
