Test your skills: The box model

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

Note: To get help, read our Test your skills usage guide. You can also reach out to us using one of our communication channels.

Interactive challenge

First of all, we are giving you a fun, interactive challenge involving margin shorthand, created by our learning partner, Scrimba.

Watch the embedded scrim, and complete the tasks on the timeline (the little ghost icons) by following the instructions and editing the code. When you are done, you can resume watching the scrim to check how the teacher's solution matches up with yours.

Task 1

In this task, there are two boxes below, one is using the standard box model, the other the alternate box model. We'd like you to 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

html
<div class="box">I use the standard box model.</div>
<div class="box alternate">I use the alternate box model.</div>
css
body {
  font: 1.2em / 1.5 sans-serif;
}
.box {
  border: 5px solid rebeccapurple;
  background-color: lightgray;
  padding: 40px;
  margin: 40px;
  width: 300px;
  height: 150px;
}

.alternate {
  box-sizing: border-box;
}
Click here to show the solution

You will need to increase the width of the second block, to add the size of the padding and border:

css
.alternate {
  box-sizing: border-box;
  width: 390px;
}

Task 2

To complete this task, add the following features to the provided box:

  • A 5px, black, dotted border.
  • A top margin of 20px.
  • A right margin of 1em.
  • A bottom margin of 40px.
  • A left margin of 2em.
  • Padding on all sides of 1em.

Your final result should look like the image below:

A box with a dotted border

html
<div class="box">I use the standard box model.</div>
css
body {
  font: 1.2em / 1.5 sans-serif;
}

.box {
}
Click here to show the solution

This task involves using the margin, border and padding properties correctly. You might choose to use the longhand properties (margin-top, margin-right, etc.), however when setting a margin and padding on all sides, the shorthand is probably the better choice:

css
.box {
  border: 5px dotted black;
  margin: 20px 1em 40px 2em;
  padding: 1em;
}

Task 3

In this task, the inline element has a margin, padding and border. However, the lines above and below are overlapping it.

To complete this task, update the 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.

html
<div class="box">
  <p>
    Veggies es bonus vobis, <span>proinde vos postulo</span> essum magis
    kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean
    garlic.
  </p>

  <p>
    Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette
    tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato.
    Dandelion cucumber earthnut pea peanut soko zucchini.
  </p>
</div>
css
body {
  font: 1.2em / 1.5 sans-serif;
}

.box span {
  background-color: pink;
  border: 5px solid black;
  padding: 1em;
}
Click here to show the solution

Solving this task requires that you understand when to use different display values. After adding display: inline-block, the block direction margin, border and padding will cause the other lines to be pushed away from the element:

css
.box span {
  background-color: pink;
  border: 5px solid black;
  padding: 1em;
  display: inline-block;
}