盒模型

理解每个元素都是一个由内容、内边距、边框和外边距组成的盒子，并掌握 box-sizing。

10 分钟 · 3 题

在 CSS 中，页面上的每个元素都是一个矩形盒子，即使你看不见它。这个盒子有四层，就像挂在墙上的一幅带框画作：内容（画本身）、内边距（画与画框之间的白色衬边）、边框（画框本身）和外边距（画框与墙上其他画作之间的空隙）。这就是我们所说的盒模型。

有三个属性控制这些层。padding 设置内部空间，位于内容与边框之间。border 绘制边框：你给它一个粗细、一种样式（solid 表示实线）和一种颜色。margin 设置外部空间，用来把相邻元素推开。所有这些距离都用像素（px）表示。

.card {
  padding: 16px;
  border: 2px solid black;
  margin: 24px;
}

你可以用 padding-top、padding-right、padding-bottom 和 padding-left 分别调整每一边，margin 也是如此。还有一些简写：给两个值时，第一个作用于上下，第二个作用于左右。所以 padding: 8px 16px; 表示上下 8 像素，左右 16 像素。

.card {
  padding: 8px 16px;
  margin-top: 32px;
  margin-bottom: 8px;
}

一个经典的坑：默认情况下，当你写 width: 200px;（width 属性设置宽度）时，那 200 像素只覆盖内容。内边距和边框是在此之上额外叠加的！一个带有 width: 200px、padding: 16px 和 border: 2px 的盒子，实际占据 200 + 16 + 16 + 2 + 2 = 236 像素的宽度。box-sizing: border-box; 属性可以解决这个问题：这时声明的宽度会把内边距和边框包含在内。盒子真正是 200 像素宽，缩小的是内容。

* {
  box-sizing: border-box;
}

.card {
  width: 200px;
  padding: 16px;
  border: 2px solid black;
}

知识检测

确认你已牢记本课的重点内容。

1. 哪个属性设置盒子的内容与它的边框之间的空间？
   • margin
   • padding
   • border
   • width
2. 在没有 box-sizing: border-box 的情况下，一个带有 width: 100px、padding: 10px 和 border: 5px solid black 的盒子占据的总宽度是多少？
   • 100 像素
   • 115 像素
   • 130 像素
   • 110 像素
3. 简写 margin: 10px 20px; 是什么意思？
   • 左右 10 像素，上下 20 像素
   • 上下 10 像素，左右 20 像素
   • 顶部 10 像素，底部 20 像素