2.4 盒模型：内边距、边框与外边距

这是 CSS 里最重要、也最容易让初学者困惑的概念：网页上的每一个元素，本质上都是一个矩形的“盒子”。 理解了盒子，你就理解了网页布局的一半。

每个盒子从内到外有四层：

下面的实验有三个滑块，拖动它们，亲眼看看 padding、border、margin 怎么改变盒子的大小和间距。

盒子的四层结构

• content（内容）：最里面，放文字、图片等真正的内容。

• padding（内边距）：内容和边框之间的留白，把内容“撑开”。

• border（边框）：包住 padding 的那条边。

• margin（外边距）：边框之外的留白，把这个盒子和别的元素推开。

.box {
  padding: 16px;              /* 内容四周留 16px */
  border: 2px solid #333;     /* 2px 实线边框 */
  margin: 24px;               /* 盒子外侧留 24px */
}

padding 还是 margin？最常见的困惑

它俩都是“留白”，区别在于留在边框的哪一侧：

• padding（内）：让盒子内部更宽松，背景色会延伸到 padding 区域。

• margin（外）：把盒子和邻居推开，是透明的，不带背景色。

一句话记忆：想让内容离边框远一点 → padding；想让盒子离别的盒子远一点 → margin。

四个方向可以分开设

padding 和 margin 都能针对上、右、下、左单独设置：

.box {
  padding-top: 8px;
  padding-bottom: 8px;
  margin-left: 16px;

  /* 简写：上 右 下 左（顺时针） */
  padding: 8px 16px 8px 16px;
  /* 两个值：上下 左右 */
  margin: 10px 20px;
}