HTML & CSS / Foundations / Lesson 6

The box model, sizing, and normal flow

Reason about the space an element occupies and use ordinary document flow before positioning content manually.

About 4 min readContent reviewed 2026-10-25

On this page

Lesson goals

Distinguish the four areas
Calculate a known box
Understand spacing and positioning limits

Distinguish the four areas

The box model separates content, padding, border, and margin. Backgrounds normally paint through the padding area, while margins separate boxes and are not part of that background. With content-box sizing, a declared width normally describes the content area, so padding and borders increase the outer border-box size. With border-box, those areas are included in the declared size when the normal sizing rules apply. Margins remain outside either model. Always state which measurement you mean before comparing a computed width with a screenshot; content width, border-box width, and total occupied space answer different questions.

Let normal flow do useful work

Block boxes normally stack in the block direction, while inline content participates in line layout and wraps according to available space. The writing mode determines what block and inline mean; they are not universal synonyms for vertical and horizontal. display changes box generation and layout participation rather than changing the semantic role of the HTML element. A styled link remains a link even when displayed as a block. Begin with flow and spacing instead of absolutely positioning every item, since normal flow naturally responds when text wraps, content grows, or a user changes font size.

Calculate a known box

The first example gives two blocks the same declared inline size, padding, and borders but different box-sizing values. Under the ordinary horizontal writing mode, the content-box version’s border box is 248 pixels: 200 plus forty pixels of padding plus eight pixels of border. The border-box version’s outer border box is 200 pixels, leaving a smaller content area. No margin is declared in either calculation. This controlled example uses fixed measurements only to teach arithmetic; a production reading layout should still adapt to available width and text requirements rather than assuming 200 pixels suits every task.

html Box arithmetic

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Box arithmetic</title>
<style>
.box { inline-size: 200px; padding: 20px; border: 4px solid; margin-block: 1rem; }
.content { box-sizing: content-box; }
.border { box-sizing: border-box; }
</style>
</head>
<body>
<main><h1>Two box sizes</h1><div class="box content">Content box</div><div class="box border">Border box</div></main>
</body>
</html>

Expected output

Border-box widths: 248px and 200px under horizontal writing.

The first border box measures 248 CSS pixels wide; the second measures 200. Block margins are separate from these width calculations.

Constrain flexibly and handle overflow

A maximum inline size can limit long lines while allowing the box to shrink. The second example uses border-box and a percentage inline size with a maximum, so padding does not unexpectedly increase the requested width. Long unbroken text needs its own wrapping policy, such as overflow-wrap: anywhere where breaking is acceptable. overflow: hidden merely clips content and can hide important controls; it is not a universal sizing repair. Overflow can also be intentional, as with a locally scrollable data table. Decide which content may wrap, scroll, or remain unbroken, and preserve access to all meaningful information.

html Flexible box

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Flexible box</title>
<style>
.panel { box-sizing: border-box; inline-size: 100%; max-inline-size: 40rem; padding: 1rem; border: 2px solid #444; overflow-wrap: anywhere; }
</style>
</head>
<body>
<main><h1>Flexible reading</h1><p class="panel">Averylongsyntheticreferencewithoutspaces1234567890 can wrap when needed.</p></main>
</body>
</html>

Expected output

A bounded flexible panel whose long token can wrap.

The panel fits available space up to its maximum. Its long synthetic token may break rather than forcing the page wider.

Understand spacing and positioning limits

Adjacent vertical block margins can collapse under specific normal-flow conditions; margins do not simply always add. Flex and grid gaps provide different, explicit spacing mechanisms. Relative positioning offsets a box visually while preserving its original flow space; absolute positioning removes it from normal flow and uses a containing block determined by layout rules. These tools suit overlays or deliberate anchoring, not a substitute for all page layout. Inspect the containing block and stacking context when positioned content appears in an unexpected place. Test with more text, fewer items, and a narrower viewport so hidden assumptions about box dimensions become visible.

Common errors and fixes

A 100% panel is wider than its parent

Why it happens: Content-box padding and borders add to its width.
How to fix it: Use an appropriate border-box sizing rule.
Prevent it next time: Calculate the entire border box, not width alone.

A clipped field cannot be reached visibly

Why it happens: Overflow hiding concealed content instead of fixing sizing.
How to fix it: Repair the oversized content and preserve usable overflow.
Prevent it next time: Check all controls after changing overflow.

Text overlaps after a font-size change

Why it happens: Absolute coordinates assumed fixed content dimensions.
How to fix it: Return ordinary content to flow or flexible layout.
Prevent it next time: Test content growth and zoom before finalizing positions.

Check your understanding

1. Calculate the border-box width for width 300px, padding 12px on both sides, and borders 2px on both sides under content-box.

Show worked solution

The border box is 300 + 24 + 4 = 328 CSS pixels. Margins would add separate external space. With border-box and the same declared width, the border box would normally be 300 pixels and the content area would shrink to 272 pixels.

2. A long identifier widens a narrow card. What should you inspect before hiding overflow?