CSS中padding基本概念及简单写法

在CSS中，padding 是用于设置元素内边距的属性，控制元素内容与边框之间的空白区域。它是盒模型的重要组成部分，不影响元素本身的大小（除非使用 box-sizing: border-box）。

---

基本概念

• 作用：调整内容与边框的距离，增加内部空间。
• 特点：
• 不改变元素内容尺寸（但会增加元素总占用空间，除非用 box-sizing: border-box）。
• 接受长度值（如 px、em）或百分比（相对于父元素宽度）。
• 背景色/图会延伸到 padding 区域。

---

简单写法

1. 统一设置所有边

div {
  padding: 20px; /* 上、右、下、左均为20px */
}

2. 分别设置各边

• 顺序：padding: 上 右 下 左;（顺时针方向）

div {
  padding: 10px 20px 30px 40px; /* 上10px 右20px 下30px 左40px */
}

3. 对称缩写

• 两个值：上下 | 左右

  div {
    padding: 10px 20px; /* 上下10px，左右20px */
  }

• 三个值：上 | 左右 | 下

  div {
    padding: 10px 15px 20px; /* 上10px，左右15px，下20px */
  }

4. 单独设置某一边

div {
  padding-top: 5px;
  padding-right: 10px;
  padding-bottom: 15px;
  padding-left: 20px;
}

---

示例

<style>
  .box {
    width: 200px;
    border: 2px solid black;
    padding: 15px 30px; /* 上下15px，左右30px */
    background-color: lightblue;
  }
</style>

<div class="box">内容与边框之间有内边距</div>

效果：盒子内部四周会有空白，背景色覆盖到 padding 区域。

---

注意事项

• padding 不支持负值。
• 行内元素（如 <span>）的上下 padding 可能不影响布局（但左右有效）。
• 使用 box-sizing: border-box 时，padding 会从元素总宽高中扣除。

通过灵活组合这些写法，可以高效控制元素的内边距！