Test your skills: Sizing

• Previous
• Overview: CSS styling basics
• Next

The aim of this skill test is to help you assess whether you understand the different ways of sizing items in CSS.

Sizing 1

In this task, you have two boxes.

To complete the task:

1. Size the first box so that the height will be at least 100px, even if there is less content that would cause it to grow to that height. The content should not overflow if it doesn't fit into the box.
2. To test this, remove the content from the HTML to make sure you still get a 100px tall box even with no content.
3. Size the second box so that it is fixed at 100px tall. In this case, the content should overflow.

The starting point of the task looks like this:

Here's the underlying code for this starting point:

<div class="box box1">
  <p>
    Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion
    daikon amaranth tatsoi tomatillo melon azuki bean garlic. Gumbo beet greens
    corn soko endive gumbo gourd.
  </p>
</div>

<div class="box box2">
  <p>
    Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion
    daikon amaranth tatsoi tomatillo melon azuki bean garlic. Gumbo beet greens
    corn soko endive gumbo gourd.
  </p>
</div>

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

.box {
  border: 5px solid black;
  width: 400px;
  margin-bottom: 1em;
}

.box1 {
  /* Add styles here */
}

.box2 {
  /* Add styles here */
}

The updated styling should look like this:

.box1 {
  min-height: 100px;
}

.box2 {
  height: 100px;
}

Sizing 2

In this task, you have a box that contains another box.

To complete the task:

1. Make the inner box width 60% of the width of the outer box. The box-sizing property is set to border-box, which means that the total width includes any padding and border.
2. Give the inner box 10% padding on all sides.

The starting point of the task looks like this:

Here's the underlying code for this starting point:

<div class="box">
  <div class="inner">Make me 60% of my parent's width.</div>
</div>

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

.box {
  border: 5px solid black;
  width: 400px;
  margin-bottom: 1em;
}

.inner {
  background-color: rebeccapurple;
  color: white;
  border-radius: 5px;
}

* {
  box-sizing: border-box;
}
.inner {
  /* Add styles here */
}

The updated styling should look like this:

.inner {
  width: 60%;
  padding: 10%;
}

Sizing 3

In this task, you have two images in boxes. One image is smaller than the box, while the other is larger, causing it to break out of the box.

To complete the task, imagine that the box is responsive and therefore could grow and shrink. Apply a declaration to the images so that the large image shrinks down into the box, but the small image does not stretch.

The starting point of the task looks like this:

Here's the underlying code for this starting point:

<div class="box">
  <img
    alt="A pink star"
    src="https://mdn.github.io/shared-assets/images/examples/star-pink_256x256.png" />
</div>

<div class="box">
  <img
    alt="Hot air balloons flying in clear sky, and a crowd of people in the foreground"
    src="https://mdn.github.io/shared-assets/images/examples/balloons.jpg" />
</div>

body {
  font: 1.2em / 1.5 sans-serif;
  padding: 1em;
}
.box {
  border: 5px solid black;
  margin-bottom: 1em;
  width: 500px;
}

img {
  /* Add styles here */
}

The updated styling should look like this:

img {
  max-width: 100%;
}

• Previous
• Overview: CSS styling basics
• Next