CSS 盒模型：内容、内边距、边框、外边距

每个盒子的四层

页面上的每个元素都被画成一个矩形，由内到外分为四层：

1. 内容：文字、图片或子元素，大小由 width 和 height 决定。
2. 内边距（padding）：盒子内部、内容与边框之间的空间。这里会显示元素的背景。
3. 边框（border）：包围内边距的线。
4. 外边距（margin）：边框之外的空间，用来把其他盒子推开。始终是透明的。

在这个例子中，每一层都有自己的颜色：蓝色是内容，绿色是内边距，深色是边框，盒子周围的琥珀色区域是外边距（由一个外层元素画出来，因为外边距本身是透明的）。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Box model</title>
  <style>
    .margin-area {
      display: flow-root; /* keeps the margin inside the amber wrapper */
      background: #f59e0b;
      width: max-content;
    }
    .box {
      width: 160px;
      height: 60px;
      padding: 20px;
      border: 10px solid #111827;
      margin: 24px;
      /* blue over the content only, green over the padding */
      background: linear-gradient(#2563eb, #2563eb) content-box, #16a34a;
      color: white;
    }
  </style>
</head>
<body>
  <div class="margin-area">
    <div class="box">content</div>
  </div>
  <p id="out"></p>
  <script>
    const box = document.querySelector('.box');
    const s = getComputedStyle(box);
    document.getElementById('out').textContent =
      'content ' + s.width + ' + padding ' + s.paddingLeft + ' x 2 + border ' +
      s.borderLeftWidth + ' x 2 = ' + box.getBoundingClientRect().width + 'px wide';
  </script>
</body>
</html>

盒子下方那一行是浏览器测量出的结果：160 + 20 + 20 + 10 + 10 = 220px。外边距会在两侧各再加 24px，但它在盒子之外，所以不计入这 220px。

宽度计算：content-box 与 border-box

默认情况下（box-sizing: content-box），width 只设置内容的宽度。内边距和边框会额外加上去，所以盒子最终比你写的数字更宽。使用 box-sizing: border-box 时，width 就是整个盒子的宽度，内容会缩小，为内边距和边框腾出空间。

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

border-box 重置

因为 border-box 让尺寸计算更直观，几乎所有现代样式表都以这条规则开头：

*,
*::before,
*::after {
  box-sizing: border-box;
}

它在使用百分比时最重要。在 content-box 下，两个带内边距的 width: 50% 列放不进同一行，因为每一列都是 50% 再加上它的内边距：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Columns</title>
  <style>
    .row { width: 400px; background: #e5e7eb; margin-bottom: 12px; }
    .col {
      display: inline-block;
      width: 50%;
      padding: 10px;
      border: 2px solid #2563eb;
      vertical-align: top;
    }
    .fixed .col { box-sizing: border-box; }
  </style>
</head>
<body>
  <div class="row"><!--
 --><div class="col">content-box</div><!--
 --><div class="col">wraps to a new line</div><!--
--></div>
  <div class="row fixed"><!--
 --><div class="col">border-box</div><!--
 --><div class="col">fits side by side</div><!--
--></div>
</body>
</html>

（HTML 注释去掉了 inline-block 列之间的空格，否则这些空格会额外占用几个像素。）

在开发者工具中查看盒模型

每个浏览器都会帮你画出盒模型。右键点击一个元素，选择“检查”，打开“计算样式”标签页（Firefox 中是“布局”）：图示中间显示内容的尺寸，四周依次是内边距、边框和外边距的值。在元素面板中把鼠标悬停在某个元素上，页面也会着色：内容为蓝色，内边距为绿色，外边距为橙色。

行内盒子遵循不同的规则

上面介绍的盒模型描述的是 <div> 和 <p> 这样的块级盒子。<span>、<a> 和 <strong> 这样的行内元素在一行文字中换行排列，对垂直空间的处理方式也不同：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Inline box</title>
  <style>
    p { width: 320px; line-height: 1.5; }
    span {
      background: #bfdbfe;
      padding: 12px 6px;
      margin: 30px 0;
      border: 2px solid #2563eb;
    }
    .ib { display: inline-block; }
  </style>
</head>
<body>
  <p>Text before an <span>inline span</span> whose vertical padding overlaps the lines around it.</p>
  <p>Text before an <span class="ib">inline-block</span> that makes room for its padding and margin.</p>
</body>
</html>

display: inline-block 让行内的元素拥有完整的盒模型：它的宽度、高度、内边距和外边距都会占用空间。每一层的详细介绍见 CSS 内边距和 CSS 外边距。

常见错误

• 给固定宽度的盒子加了内边距，却不明白它为什么变大了。 在 content-box 下，内边距和边框会加到 width 上。请使用 border-box。
• 以为外边距会显示背景颜色。 外边距始终是透明的；需要有颜色的空白时，请使用内边距。
• 给行内元素设置 height 或垂直外边距。 不会有任何效果；请使用 display: inline-block 或 block。
• 计算时忘了边框。 在 content-box 下，给 width: 100% 的元素加上 1px 边框，它就会宽出 2px，可能导致出现水平滚动条。
• 混淆外边距和内边距。 简单来说：内边距在边框里面，外边距在边框外面。margin 与 padding 页面把两者放在一起做了对比。