Box Model

You might say

This card is set to 320px. Why does adding padding make it overflow its container?

The box model is the browser's rule for the space used by an element's content, padding, border, and margin.A card with 320px of content width can occupy more after horizontal padding and a border, leaving two columns unable to fit. A button's hit area is affected by these layers too. The box model explains size calculation, not whether excess content should show, clip, or scroll.

Know first

HTML

What a card's 320px actually includes

box-sizing: content-box;width: 320px;

0370px

Content 320

320 + 24×2 + 1×2= 370px

How space is calculated from inside out

Content is not the whole width: The content box holds text and images; padding creates breathing room, border wraps them, and margin separates the element from its neighbors.

Layout uses the actual footprint: When elements sit side by side, the browser calculates the space they truly occupy. DevTools box-model inspection shows whether content, padding, border, or margin caused the squeeze.

Quick checkChoose the best answer

Two cards each use `width: 50%` and each add 24px left and right padding, then overflow horizontally. What concept should you inspect first?

Inspect whether width must also account for padding and border in the box model, then choose the sizing ruleInspect the search keyword because card text may be too longInspect cross-origin settings because layout failures are usually CORS

You can say this to an AI Agent

Inspect the box model of these two-column cards and state the space used by content width, padding, border, and margin. Keep two columns on desktop and prevent horizontal overflow at 390px; afterward confirm the computed size in developer tools.

Learn next

1Overflow→2Responsive Design→