padding 在行内元素上并非无效，而是垂直方向被行高和行框限制，水平方向仍可见；常用 display: inline-block 解决，兼顾文档流与完整 padding 生效。
为什么 padding 在行内元素上“看起来无效”
不是真的无效，而是 padding 依然生效，但垂直方向（padding-top 和 padding-bottom）的视觉效果被行高（line-height）和行框（inline formatting context）限制住了。浏览器会渲染 padding，但它不撑开行高，相邻行不会因此分离，导致你以为“没反应”。水平方向的 padding-left/padding-right 通常可见，因为不影响行布局。
用 display: inline-block 解决最常用场景
这是兼顾布局控制与文档流的首选方案。它保留了元素默认的“不独占一行”特性，同时让所有方向的 padding（以及 margin、width、height）完全生效。
.btn {
display: inline-block;
padding: 8px 16px;
background: #007bff;
color: white;
text-decoration: none;
}
- 适用于按钮、标签、图标链接等需要内边距又不想换行的元素
- 注意：
inline-block元素之间会因 HTML 换行/空格产生约4px的间隙，可用font-size: 0或注释消除 - 它仍参与文本流，不会像
block那样强制换行，适合嵌套在段落中
改用 display: block 的适用条件
当元素逻辑上本就不该和其他文字同行（比如导航项、独立操作区），且你希望它完全脱离行内布局约束时，block 更干净直接。
.nav-link {
display: block;
padding: 12px 20px;
margin: 0 5px;
}
- 必须配合
float或flex才能横向排列多个block元素 - 会自动换行，破坏原有文本流位置——如果它原本在
<p>里，会导致段落断裂 - 若只是想加 padding，却强行设为
block，反而可能引发额外的布局重排或高度塌陷
还有更轻量的替代方案吗？
有，但需谨慎。比如 display: table-cell 或利用伪元素撑开空间，但兼容性和语义性不如 inline-block。现代项目中，如果已用 Flex 布局，直接把父容器设为 display: flex，子项保持 display: inline（甚至默认）也能自由加 padding——此时 padding 生效是因为父级是 flex 容器，不再受限于 inline formatting context。
立即学习“前端免费学习笔记（深入）”；
真正容易被忽略的是：**不要只盯着 display 改变，先确认是否误用了 vertical-align 导致 padding 被对齐方式“遮住”；也不要忘记检查父元素是否有 overflow: hidden 把溢出的 padding 剪掉了。**
