一、基本概念

1.1 属性定义

• 用于设置元素内容区域与边框之间的空间距离（内边距）

• CSS盒模型的重要组成部分

1.2 属性写法
完整写法：

padding-top: 10px;
padding-right: 5%;
padding-bottom: 1em;
padding-left: 2rem;

简写属性：

padding: 10px; // 四边相同
padding: 10px 20px; // 上下 | 左右
padding: 10px 20px 15px; // 上 | 左右 | 下
padding: 10px 5% 15px 20px; // 上 右 下 左

1.3 取值类型

• 长度值：px, em, rem等

• 百分比：相对于父元素宽度计算

• inherit：继承父元素值

• 全局值：initial/unset（注意：不支持负值）

二、核心使用场景

2.1 界面元素留白

.card {
padding: 24px; // 卡片内容舒适边距
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

2.2 按钮交互优化

.button {
padding: 12px 24px; // 增大可点击区域
transition: padding 0.2s;
}

.button:hover {
padding: 14px 26px; // 悬停动效
}

2.3 表格样式优化

.button {
padding: 12px 24px; // 增大可点击区域
transition: padding 0.2s;
}

.button:hover {
padding: 14px 26px; // 悬停动效
}

2.4 响应式布局

.container {
padding: 20px 5%; // 自动适应屏幕宽度
}

三、特殊场景处理

3.1 行内元素特性

span {
padding: 20px; // 仅左右padding影响布局，上下会重叠
background: yellow;
}

3.2 百分比计算陷阱

.parent { width: 400px; }
.child {
padding: 10%; // 实际计算为400px*10%=40px
}

3.3 盒模型影响

.box-standard {
width: 200px;
padding: 20px; // 总宽度=200+20*2=240px
}

.box-border-box {
box-sizing: border-box;
width: 200px;
padding: 20px; // 总宽度保持200px
}

3.4 布局体系差异

.flex-item {
padding: 20px; // 参与剩余空间分配
}

.grid-item {
padding: 30px; // 影响网格轨道尺寸计算
}

3.5 内容溢出处理

.overflow-box {
width: 300px;
padding: 20px;
overflow: auto; // 必须显式处理溢出
}

四、实践建议

1. 移动端优先：使用相对单位（rem/em）

2. 动画优化：避免频繁修改padding

3. 调试技巧：临时添加outline: 1px solid red辅助调试

4. 性能注意：padding变化会触发重绘（比回流影响小）

五、常见误区

• 误用padding代替margin进行元素间距控制

• 忽略不同显示类型（inline/block）的表现差异

• 在固定尺寸容器中未使用box-sizing: border-box

• 百分比值的计算基准误认为是元素自身宽度

• 内边距会撑大元素，除非使用box-sizing: border-box;。