CSS padding属性

padding属性定义元素的内边距，即内容区域与边框之间的空间。

基本语法

.box {
  padding: 10px;
}

/* 分属性 */
.box {
  padding-top: 10px;
  padding-right: 20px;
  padding-bottom: 10px;
  padding-left: 20px;
}

四值语法

.box {
  padding: 10px;             /* 四边相同 */
  padding: 10px 20px;        /* 上下 左右 */
  padding: 10px 20px 30px;   /* 上 左右 下 */
  padding: 10px 20px 30px 40px; /* 上 右 下 左（顺时针） */
}

特点

.box {
  width: 200px;
  padding: 20px;
  background: #eee;
}

/* content-box 模式：实际宽度 = 200 + 40 = 240px */
/* border-box 模式：实际宽度 = 200px，内容区 = 160px */

百分比值

.box {
  width: 300px;
}

.child {
  padding: 10%;  /* 相对于父元素宽度 300px，即 30px */
}

注意：padding 百分比值始终相对于父元素的宽度，即使是垂直方向。

单边设置

.box {
  padding-top: 10px;
  padding-right: 20px;
  padding-bottom: 15px;
  padding-left: 25px;
}

与 margin 的区别

要点总结

• padding 控制内容与边框之间的距离
• padding 区域会显示背景色
• padding 不支持负值
• 百分比值相对于父元素宽度

存放路径：articles/CSS/入门/CSS盒模型/CSS padding属性.md