Test your skills: The box model

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.

Box model 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.

The starting point of the task looks like this:

Here's the underlying code for this starting point:

<div class="box">I use the standard box model.</div>
<div class="box alternate">I use the alternate box model.</div>

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;
}

The updated styling should look like this:

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

Box model 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.

The starting point of the task looks like this:

Here's the underlying code for this starting point:

<div class="box">I use the standard box model.</div>

body {
  font: 1.2em / 1.5 sans-serif;
}

.box {
}

The updated styling should look like this:

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

Box model 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.

The starting point of the task looks like this:

Here's the underlying code for this starting point:

<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>

body {
  font: 1.2em / 1.5 sans-serif;
}

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

The updated styling should look like this:

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

• Previous
• Overview: CSS styling basics
• Next