The Box Model and Sizing Tutorial | SovranCode

Course contentsThe Box Model and Sizing · 16 topics

CSS Foundations

CSS Introduction Selectors and Relationships Cascade, Specificity, and Inheritance Values, Units, and Color

Layout Systems

The Box Model and Sizing Normal Flow, Display, and Positioning Flexbox CSS Grid

Applied CSS Systems

Backgrounds, Borders, and Visual Layers Interactive States and Pseudo-elements Overflow, Stacking Contexts, and Layering Transforms, Transitions, and Animation CSS Architecture, Components, and Maintenance

Responsive and Responsible CSS

Responsive Design and Container Queries Typography and Rhythm Motion, Focus, and Accessibility

CSS 49 min

The Box Model and Sizing

Reason about content, padding, borders, margins, and predictable element sizing.

Every rendered element participates in the box model. With border-box, the declared width includes padding and border, which makes component sizing predictable. Margins create outside separation while padding protects the component's inside space.

See the core pattern

Read this rule set from the outside in. Identify the inputs, the decision or transformation, and the result before changing it.

*, *::before, *::after {
  box-sizing: border-box;
}

.notice {
  width: min(100%, 42rem);
  padding: 1.25rem;
  border: 2px solid #10231f;
  margin-inline: auto;
}

Working rules

Set border-box globally
Use padding for internal rhythm and gap for sibling rhythm
Inspect overflow instead of hiding it immediately

A common mistake

Fixed widths plus padding can overflow a narrow viewport when the content-box default is assumed.

Guided practice

Calculate what a 300px content-box with 20px padding and 2px borders occupies.

Copy the example into the editable notebook below.
Change one thing at a time and keep the program or rule valid.
Explain the result in one sentence without relying on jargon.

CSS DEEP DIVE · ABOUT 25 MIN

Diagnose an overflowing card

Read the explanation, predict the visual result, then edit and run a complete example. Finish with a repair, an independent build, and a knowledge check.

Distinguish the declared width from occupied space

With content-box, width describes the content area, so padding and borders add to the rendered border-box width. A 300px box with 20px padding and a 2px border on each side occupies 344px before margins. With border-box, that same declared 300px includes the padding and border, leaving 256px for content. Margins remain outside either sizing model. Use the box-model diagram in DevTools to name each region, then predict the result before toggling box-sizing.

Overflow is information about a constraint

A long unbroken word, a fixed-size child, or an intrinsic minimum can overflow a seemingly flexible parent. Hiding overflow may conceal the symptom while clipping content or focus rings. Identify the child that exceeds its available space and choose an appropriate repair: flexible sizing, wrapping, or a scrolling region for genuinely wide content. Vertical margins can collapse in normal block layout, so two margins do not always add. A flex or grid gap is often a clearer way to express deliberate spacing between sibling components.

See why width changes

Predict the difference, then compare the rendered boxes. Both versions use the same HTML.

Before repair

.card { box-sizing:content-box; width:220px; padding:24px; border:4px solid #2458a0; }

After repair

.card { box-sizing:border-box; width:220px; padding:24px; border:4px solid #2458a0; }

Before: 220 + 48 + 8 = 276px outside width. After: the outside width is 220px and the content area becomes 164px. The text wraps sooner because padding and borders now fit inside the declared width.

Inspect the shared HTML

<div class="card">220px declared width</div>

Apply the repair in the saved editor below, then test a narrower width and longer content.

Give the card a 300px width. Switch between content-box and border-box and read the resulting border-box width in DevTools.

Saved CSS practice

Edit the CSS inside the style element. Account work syncs; guest work stays on this device.

Code

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CSS practice</title>
<style>
*, *::before, *::after { box-sizing: border-box; }
body { font: 1rem/1.7 system-ui; padding: 1rem; margin: 0; }
.card { width: min(100%, 30rem); padding: 20px; border: 2px solid #254fc0; margin-inline: auto; background: #edf2f7; }
h1 { margin-top: 0; }
</style>
</head>
<body>
<main><article class="card"><h1>A predictable card</h1><p>Resize the window and inspect the content, padding, border, and outside spacing.</p></article></main>
</body>
</html>

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CSS practice</title>
<style>
*, *::before, *::after { box-sizing: border-box; }
body { font: 1rem/1.7 system-ui; padding: 1rem; margin: 0; }
.card { width: min(100%, 30rem); padding: 20px; border: 2px solid #254fc0; margin-inline: auto; background: #edf2f7; }
h1 { margin-top: 0; }
</style>
</head>
<body>
<main><article class="card"><h1>A predictable card</h1><p>Resize the window and inspect the content, padding, border, and outside spacing.</p></article></main>
</body>
</html>

Result

Practice here: edit your HTML or CSS and compare the result. Live preview updates after a short pause. Scripts, form submissions, and external resources are blocked. Wide previews scroll inside this panel. Running code does not grade or save it; use the separate learning and save controls.

Run in new window

Loading saved work…

Edit the CSS inside the style element and compare the result in the live preview. Your work saves automatically; you can also download a local copy.

DEBUGGING CHALLENGE

Find the faulty assumption

Explain the problem and write your repair before opening the solution.

.card { width: 100%; padding: 20px; border: 2px solid; box-sizing: content-box; }

Reveal repair and explanation

.card { width: 100%; padding: 20px; border: 2px solid; box-sizing: border-box; }

content-box adds padding and borders beyond 100% of the parent's width. border-box includes them inside the declared width.

INDEPENDENT LAB

Build it without copying

Build two stacked cards inside a narrow container. Add padding, borders, and a long word, then repair any horizontal overflow without clipping it.

Code

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Diagnose an overflowing card lab</title>
  <style>
    *, *::before, *::after { box-sizing: border-box; }
    body { margin: 0; padding: 1rem; font: 1rem/1.6 system-ui; }
    /* Build your solution here. */
  </style>
</head>
<body>
  <main>
    <h1>Diagnose an overflowing card</h1>
    <p>Replace this starter content with the structure your solution needs.</p>
  </main>
</body>
</html>

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Diagnose an overflowing card lab</title>
  <style>
    *, *::before, *::after { box-sizing: border-box; }
    body { margin: 0; padding: 1rem; font: 1rem/1.6 system-ui; }
    /* Build your solution here. */
  </style>
</head>
<body>
  <main>
    <h1>Diagnose an overflowing card</h1>
    <p>Replace this starter content with the structure your solution needs.</p>
  </main>
</body>
</html>

Result

Practice here: edit your HTML or CSS and compare the result. Live preview updates after a short pause. Scripts, form submissions, and external resources are blocked. Wide previews scroll inside this panel. Running code does not grade or save it; use the separate learning and save controls.

Self-review checklist

Width calculations explicitly include or exclude padding and borders.No page-level horizontal scrolling occurs at a 320px viewport.Spacing remains intentional without relying on accidental margin collapse.

What did you test and change?

Loading saved work…

This lab is saved separately from the worked example. The checklist is a self-review, not an automatic grade.

CSS knowledge check

Answer both questions correctly to pass this lesson check. Account scores are recomputed on the server. This is a learning check, not certification.

1. How wide is a 300px content-box with 20px padding and 2px borders on both sides, excluding margins?300px322px344px

2. Does border-box include margins in its declared width?Yes, alwaysNo, margins remain outsideOnly when centered

Loading saved work…