CSS padding 内边距：简写、单边设置、百分比与示例

padding 是什么

padding（内边距）是元素内部的空间，位于内容和边框之间。它会显示元素的背景，所以正是这个属性让按钮、卡片或徽标显得不那么拥挤。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Padding</title>
  <style>
    .box {
      padding: 24px;
      border: 3px solid #111827;
      /* blue over the content only, green over the padding */
      background: linear-gradient(#2563eb, #2563eb) content-box, #16a34a;
      color: white;
      width: max-content;
      margin-bottom: 12px;
    }
    .none { padding: 0; }
  </style>
</head>
<body>
  <div class="box none">padding: 0</div>
  <div class="box">padding: 24px (the green band)</div>
</body>
</html>

蓝色区域是内容。它周围的绿色带是四边各 24px 的内边距，边框位于它的外侧。

padding 简写：1、2、3 或 4 个值

padding 用一条声明设置四条边。值的个数决定每条边取哪个值，从上方开始按顺时针排列：

两个值表示“上下，左右”。三个值表示“上，左右，下”。四个值按顺时针走一圈：上、右、下、左（英文里常用 TRouBLe 这个词来记）。

在下面输入任意简写。盒子会重新绘制，浏览器会报告每条边得到的值：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Padding tester</title>
  <style>
    #box {
      width: max-content;
      padding: 10px 20px 30px 40px;
      border: 3px solid #111827;
      background: linear-gradient(#2563eb, #2563eb) content-box, #16a34a;
      color: white;
      margin-top: 10px;
    }
    code { font-size: 14px; }
  </style>
</head>
<body>
  <label>padding: <input id="val" value="10px 20px 30px 40px" size="24"></label>
  <div id="box">content</div>
  <p><code id="out"></code></p>
  <script>
    const box = document.getElementById('box');
    const input = document.getElementById('val');
    const show = () => {
      box.style.padding = input.value;
      const s = getComputedStyle(box);
      document.getElementById('out').textContent =
        'top ' + s.paddingTop + ', right ' + s.paddingRight +
        ', bottom ' + s.paddingBottom + ', left ' + s.paddingLeft;
    };
    input.addEventListener('input', show);
    show();
  </script>
</body>
</html>

试试 8px、8px 24px、0 0 40px 和 1em 5%。无效的值（例如 -10px）会被忽略，盒子保持上一次有效的内边距。

一次设置一条边

每条边都有自己的属性，如果只想修改其中一条，这比写四个值的简写更清楚：

.card {
  padding-top: 16px;
  padding-right: 24px;
  padding-bottom: 16px;
  padding-left: 24px;
}

先写简写再写单边属性是一种常见的写法：先设置全部，再调整其中一条。

.card {
  padding: 16px;
  padding-bottom: 32px; /* only the bottom changes */
}

这里顺序很重要：如果把 padding 简写写在 padding-bottom 之后，下内边距就会被重置回 16px。

逻辑内边距：padding-inline 与 padding-block

padding-left 和 padding-right 是物理属性：在任何语言中都固定在同一侧。逻辑属性则跟随书写方向，如果你的网站也会以从右到左的方式显示，这正是你需要的：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Logical padding</title>
  <style>
    .note {
      padding-block: 8px;
      padding-inline-start: 40px; /* space before the text */
      padding-inline-end: 12px;
      border-inline-start: 6px solid #2563eb;
      background: #e5e7eb;
      margin-bottom: 8px;
    }
  </style>
</head>
<body>
  <p class="note">The wide padding is at the start of the line.</p>
  <p class="note" dir="rtl">Right to left: the edge and the wide padding switch sides</p>
</body>
</html>

padding 会让盒子变大（除非使用 border-box）

默认情况下，width 只是内容的宽度，内边距会额外加上去。一个 width: 200px 的盒子加上 padding: 20px，实际宽度是 240px：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Padding and width</title>
  <style>
    .box {
      width: 200px;
      padding: 20px;
      background: #bfdbfe;
      margin-bottom: 10px;
    }
    .border-box { box-sizing: border-box; background: #bbf7d0; }
  </style>
</head>
<body>
  <div class="box">content-box</div>
  <div class="box border-box">border-box</div>
  <script>
    document.querySelectorAll('.box').forEach((el) => {
      el.textContent += ': ' + el.offsetWidth + 'px wide';
    });
  </script>
</body>
</html>

box-sizing: border-box 让盒子保持 200px，内边距从内部扣除。完整的计算方法见盒模型页面。

百分比内边距

百分比内边距是相对于父元素的宽度计算的，四条边都是如此，包括上和下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Percent padding</title>
  <style>
    .parent { width: 300px; height: 100px; background: #e5e7eb; }
    .child {
      padding-top: 10%; /* 10% of 300px = 30px, not 10% of 100px */
      background: #f59e0b;
    }
  </style>
</head>
<body>
  <div class="parent"><div class="child" id="c"></div></div>
  <p id="out"></p>
  <script>
    document.getElementById('out').textContent =
      'padding-top: ' + getComputedStyle(document.getElementById('c')).paddingTop;
  </script>
</body>
</html>

以前给 16:9 视频盒子用的“padding-top: 56.25%”技巧就是这么来的。如今 aspect-ratio: 16 / 9 可以直接实现同样的效果。

按钮和链接上的 padding

要让链接或按钮变大，用 padding 是正确的做法，因为内边距属于元素本身，也就属于可以点击或触摸的区域。用外边距只会增加空间，并不会扩大点击目标。

.btn {
  display: inline-block; /* lets vertical padding take space in the line */
  padding: 10px 18px;    /* a comfortable touch target */
}

padding 可以取的值

常见错误

• 四个值的简写顺序写错。 顺序是上、右、下、左，按顺时针。
• 添加内边距后盒子变大了。 设置 box-sizing: border-box。
• 用 padding 分隔两个元素。 元素之间的空间是外边距；内边距是一个元素内部的空间。见 margin 与 padding 的区别。
• 行内链接的垂直内边距和其他行重叠。 把它改成 inline-block。
• 负的 padding 或 padding: auto。 两者都无效，会被悄悄忽略。