测试你的技能：盒子模型

本技能测试的目的是评估你是否理解 CSS 盒子模型。

¥The aim of this skill test is to assess whether you understand the CSS box model.

注意：你可以在此页面上的交互式编辑器或在线编辑器（例如 CodePen、JSFiddle 或 Glitch）中尝试解决方案。

¥Note: You can try solutions in the interactive editors on this page or in an online editor such as CodePen, JSFiddle, or Glitch.

如果你遇到困难，可以通过我们的 沟通渠道 之一与我们联系。

¥If you get stuck, you can reach out to us in one of our communication channels.

任务 1

¥Task 1

在此任务中，下面有两个框，一个使用标准框模型，另一个使用备用框模型。通过向 .alternate 类添加声明来更改第二个框的宽度，使其与第一个框的视觉宽度相匹配。

¥In this task, there are two boxes below, one is using the standard box model, the other the alternate box model. Change the width of the second box by adding declarations to the .alternate class, so that it matches the visual width of the first box.

你的最终结果应如下图所示：

¥Your final result should look like the image below:

Two boxes of the same size

尝试更新下面的实时代码以重新创建完成的示例：

¥Try updating the live code below to recreate the finished example:

下载此任务的起点 在你自己的编辑器或在线编辑器中工作。

¥Download the starting point for this task to work in your own editor or in an online editor.

任务 2

¥Task 2

在此任务中，添加到框中：

¥In this task, add to the box:

  • 5px 黑色虚线边框。
  • 上边距为 20 像素。
  • 右边距为 1em。
  • 下边距为 40 像素。
  • 左边距为 2em。
  • 1em 的所有边上都有填充。

你的最终结果应如下图所示：

¥Your final result should look like the image below:

A box with a dotted border

尝试更新下面的实时代码以重新创建完成的示例：

¥Try updating the live code below to recreate the finished example:

下载此任务的起点 在你自己的编辑器或在线编辑器中工作。

¥Download the starting point for this task to work in your own editor or in an online editor.

任务 3

¥Task 3

在此任务中，内联元素具有边距、填充和边框。然而，上面和下面的线是重叠的。你可以在 CSS 中添加什么，以使其他行遵循边距、填充和边框的大小，同时仍保持元素内联？

¥In this task, the inline element has a margin, padding and border. However, the lines above and below are overlapping it. What can you add to your CSS to cause the size of the margin, padding, and border to be respected by the other lines, while still keeping the element inline?

你的最终结果应如下图所示：

¥Your final result should look like the image below:

An inline box with space between it and the text around it.

尝试更新下面的实时代码以重新创建完成的示例：

¥Try updating the live code below to recreate the finished example:

下载此任务的起点 在你自己的编辑器或在线编辑器中工作。

¥Download the starting point for this task to work in your own editor or in an online editor.