10 Multimedia · 2026
Week 4 · Lesson 08

The Box Model — Display, Padding, Margin, Border

Week 4 · 75 minutes · Year 10 Industrial Technology — Multimedia

IND5-2IND5-3

Learning intentions

  • I can describe the 4 layers of the box model in order.
  • I can use the display property (block, inline, inline-block) correctly.
  • I can use padding, margin, border shorthand and longhand forms.
  • I can apply box-sizing: border-box for predictable layout maths.

Success criteria

  • My page uses padding AND margin AND border intentionally.
  • At least one element has border-radius rounded corners.
  • I have added * { box-sizing: border-box; } to my stylesheet.
  • I can open DevTools and see the 4 coloured box model layers.

Do Now · 5 min

Every HTML element is a rectangular box. Every single one. Including the text you're reading. Including this page. Including the button you'll click later.

Open any website in DevTools. Click the Select Element arrow (top-left of DevTools). Hover text or an image. See the coloured layers? That's the box model.

I Do · ~10 min Teacher demonstration

Step 1 — The 4 layers (inside to out)

+---------- MARGIN (outside, transparent) ----------+
|                                                    |
|   +------ BORDER (the line around the box) ----+   |
|   |                                             |  |
|   |   +-- PADDING (inside, same colour as bg) -+|  |
|   |   |                                        ||  |
|   |   |          CONTENT                       ||  |
|   |   |       (text, image, etc)               ||  |
|   |   +----------------------------------------+|  |
|   +---------------------------------------------+  |
|                                                    |
+----------------------------------------------------+
Memory aid: padding = space inside the border. margin = space outside the border.

Step 2 — The display property controls how boxes behave

display: block;          /* takes full width, starts new line */
display: inline;         /* only content width, flows in text */
display: inline-block;   /* flows in text BUT accepts width/height */
display: none;           /* completely hidden, takes no space */

Step 3 — Shorthand for margin/padding (clockwise!)

/* 1 value: all 4 sides */
padding: 20px;

/* 2 values: top/bottom, left/right */
padding: 10px 20px;

/* 3 values: top, left/right, bottom */
padding: 10px 20px 30px;

/* 4 values: top, right, bottom, left — CLOCKWISE */
padding: 10px 20px 30px 40px;

/* Longhand for one side only */
padding-top: 10px;
margin-left: 24px;

Step 4 — Border: width style colour

/* Shorthand — width, style, colour */
border: 2px solid #1f3a68;

/* Border styles: solid, dashed, dotted, double, none */
border: 1px dashed #888;

/* Rounded corners */
border-radius: 8px;           /* all 4 corners */
border-radius: 8px 20px;      /* top-left/bottom-right, top-right/bottom-left */
border-radius: 50%;           /* perfect circle (if width = height) */

Step 5 — box-sizing: border-box (the one CSS rule professionals always add)

By default, width + padding + border = bigger than you asked for. Example:

.card { width: 400px; padding: 20px; border: 2px solid; }
/* Actual rendered width: 400 + 20 + 20 + 2 + 2 = 444px */

With box-sizing: border-box, the width INCLUDES padding and border:

* { box-sizing: border-box; }   /* apply to every element */

.card { width: 400px; padding: 20px; border: 2px solid; }
/* Actual rendered width: 400px. Much easier maths. */
Industry best practice: add * { box-sizing: border-box; } as the first rule of every stylesheet you write. Every professional frontend developer does this.

We Do · ~15 min Guided build

Together, build a card component:

<article class="card">
  <h3>My first card</h3>
  <p>This is the card content.</p>
</article>
* { box-sizing: border-box; }

.card {
  background: white;
  padding: 24px;                  /* space INSIDE */
  border: 1px solid #e4e7ec;
  border-radius: 10px;
  margin-bottom: 20px;             /* space OUTSIDE to next card */
  max-width: 400px;
}

Then duplicate the article 3 times and watch margin-bottom separate them. Inspect in DevTools — see the orange margin and green padding layers?

You Do · ~35 min Independent practice

Go back to your L07 styled page. Add box model to it:

  1. Add * { box-sizing: border-box; } at the top of your styles.css.
  2. Add padding inside body (try 2rem).
  3. Add max-width to main content (e.g. max-width: 800px; margin: 0 auto;).
  4. Turn at least one element into a "card" with background, padding, border, margin-bottom, border-radius.
  5. Use both shorthand AND longhand margin/padding somewhere in your CSS.
  6. Inspect in DevTools — confirm you can see the 4 coloured box model layers.

Differentiation

Support

Provided HTML with card structure + commented CSS with TODOs for padding/border/margin values.

Core

Complete from scratch on your own file.

Extension

Research CSS logical properties (margin-block, padding-inline) on MDN. Explain how they differ from physical properties (top/right/bottom/left).

Exit Ticket · 5 min

Exit ticket

1. Order the 4 layers inside to out:

Content → ________ → ________ → ________

2. Which property creates space INSIDE an element? _______

3. Which property creates space OUTSIDE an element? _______

4. What does box-sizing: border-box change?

_____________________________________________

5. Paste your favourite border-radius value:

_____________________________________________

Resources for this lesson

📚 Deeper Reading

External references drawn from Shay Howe's "Learn to Code HTML & CSS" and University of Michigan's "Web Design for Everybody" Coursera specialization. All credit to original authors.