The box model & sizing

Give every box a boundary

Lesson 5 of 20 · 8 min · Module 2: A deliberate visual style

Every visible element occupies a box. Its content, padding, border, and margin each have a different role in the layout.

Start this lesson →

Free. No installation: you write and run the code in your browser, and it is checked automatically.

By the end, you’ll be able to…

Name the parts of the box model
Predict the effect of padding on width
Use border-box for predictable component sizes

The idea

With box-sizing: border-box, a declared width includes padding and border. Margin remains outside that width. This makes card sizes easier to reason about.

<style>
  .card { box-sizing: border-box; width: 240px; padding: 24px; }
</style>
<div class="card">Room to breathe.</div>

01Separate inside and outside space

Padding separates content from the border. Margin separates the element from its neighbors. A background paints the content and padding areas, while margin remains outside the box.

02Calculate the content width

For this card, 240px minus 48px of horizontal padding and 4px of borders leaves 188px for content. The outer border box still measures 240px.

Your turn

Style .card with box-sizing: border-box, width: 240px, padding: 24px, and border: 2px solid #285b44. Keep its content.

What the checks look for

Width includes padding and border
Card is 240px wide
Card has 24px padding
Card has a 2px solid green border

Try it in the editor →

Take this with you

Decide what a declared size should include before adding spacing.