Boxes

Classroom resources

Load these into Waypoints Prepare: choose Load URL and paste the copied address, or download the file and import it. In Prepare, the worksheet's Teacher edition shows the answers; the student copy hides them.

• Slides Download Copy address for Prepare Present from the browser, or export to PowerPoint or PDF.
• Worksheet Download Copy address for Prepare Print the student copy; the Teacher edition has the answers.

Students will be able to

• I can name the four parts of a box: content, padding, border and margin.
• I can work out how wide a box is from its width, padding and border.
• I can use padding and margin to space boxes inside and out.
• I can explain why a value without a unit does nothing.

Timing

Predict and Run 10 min · Investigate 12 min · Mix it up 4 min · Modify 8 min · Make 11 min

Before class

Read the unit primer "CSS in 5 minutes" (the box paragraph), then make the Make task's card yourself and point at it with Box model on.

The Box model view (a button in the HTML playground) works like the browser's developer tools: point at any box to see its margin (orange), border (gold), padding (green) and content (blue), with sizes. It never changes the page. The Boxes button is different: it adds space to show nesting, so use Box model in this lesson.

The one idea: width sets the content only. The box on the page is the width plus the padding and border on both sides. Real sites often set box-sizing: border-box so that width includes padding and border; mention it once, after students are comfortable with the sums.

Running the lesson

1. Predict: almost everyone says 200. The card is 250 wide: padding and border are added to the width on both sides. Let students check with Box model. Most will say 200. Ask what the 20 and the 5 in the rule are for, then let them point at the card with Box model.
2. Run: change the padding and point again. Ask: which number in the label changed, and which part of the card grew?
3. Investigate: the number task is the sum on paper (180 + 30 + 8). The wrong answers are the real slips: content only, one side only, margin included. The last task is padding: 20 with no unit; the browser ignores it without an error.
4. Mix it up: padding works on an inline span but width does not. Ask who remembers what block and inline meant.
5. Modify: build the card one property at a time, checking each with Box model, and work out the width before pointing.

In class

On the slides at these points. Students can do the whole lesson on their own; these are for the room. In the deck, the Run, Modify and Make slides have the live playground in them (the tutorial link is the backup), and the notes above are in each slide's speaker notes.

• Measure a neighbour's card (end, 4 min)

  Swap cards with a partner. Without running them, add up the width of the card on paper, then point at it with Box model to check.

  Listen for students who add only one side of the padding or border. Ask how many sides a box has left and right.

The hard part (on purpose)

Working out that padding and border add to the width. Ask for the sum on paper first (200 + 20 + 20 + 5 + 5), then check it with Box model.

When students get stuck

Answers to the checks

1. Predict: How wide is the card on the page, from the outside of its border on the left to the outside on the right, in pixels?
   250: 200 for the content, plus 20 padding on each side, plus 5 border on each side.
2. Add up the width: In the picture, how wide is the first card on the page, outside border to outside border, in pixels?
   218
   180 for the content, plus 15 + 15 of padding, plus 4 + 4 of border: 218. The 16px margin is outside the card.
3. Room for the words: The words touch the border of a card. Which property gives them room inside the border?
   padding
   Padding is the room between the words and the border. Margin is the space outside the border, between cards.
4. The padding that does nothing: The border shows, but the words are squashed against it: the padding does nothing, and there is no error. Click the line that causes it.
   line 3
   Line 3 has no unit. padding: 20 means nothing to the browser, so it ignores the whole line. It needs padding: 20px;.
5. Mix it up: Both tags should be boxes 120px wide, but each is only as wide as its word. The padding works, the width does not. What fixes the width?
   Add display: block; to the .tag rule, because an inline box ignores its width
   A span is an inline box: it sits in the line of text and ignores width. display: block makes it a block box, so the 120px applies (and each tag then starts a new line).

Solutions

One possible solution for each task. Other correct programs are fine.

Modify › Room inside

<style>
  .card {
    border: 2px solid navy;
    padding: 12px;
  }
</style>
<div class="card">Owls: 12 points</div>
<div class="card">Hawks: 9 points</div>

Modify › Space between

<style>
  .card {
    border: 2px solid navy;
    padding: 12px;
    margin: 16px;
  }
</style>
<div class="card">Owls: 12 points</div>
<div class="card">Hawks: 9 points</div>

Modify › A set width

<style>
  .card {
    border: 2px solid navy;
    padding: 12px;
    margin: 16px;
    width: 200px;
  }
</style>
<div class="card">Owls: 12 points</div>
<div class="card">Hawks: 9 points</div>

Make

<style>
  .card {
    width: 220px;
    padding: 16px;
    border: 4px solid darkorange;
    margin: 16px;
    background-color: lightyellow;
  }
</style>
<div class="card">
  <h2>Soccer club</h2>
  <img src="ball.svg" alt="A soccer ball" width="80">
  <p>Thursdays after school on the top oval.</p>
</div>

Stretch and support

Stretch: Use different padding on each side (padding: 10px 30px;) and predict the width before pointing at it. Then add border-radius: 12px; for rounded corners.

Support: Give students the Modify starter with Box model on and ask them only to add padding, then margin, pointing at the card after each.

Exit ticket

A box has width: 300px; padding: 10px; border: 2px solid; How wide is it on the page, and why?

324 pixels: 300 for the content, plus 10 padding on each side (20) and 2 border on each side (4).

What each step is for

• Predict: Most students say 200; the card is 250 because padding and border are added to the width on both sides.
• Run: The Box model view measures each part: content, padding, border and margin.
• Investigate: The width is only the content: padding and border add to it on both sides, and margin is outside it.
• Modify: Building a card one property at a time, checking each change with the Box model view.
• Mix it up: A span is inline, so its width is ignored until display: block makes it a block box.

Where it leads

Next lesson is a review of the unit on a whole newsletter page: reading a longer stylesheet and turning the articles into cards. Class idea: measure a real website's buttons with the browser's developer tools (right-click, Inspect).