Understanding the CSS Box Model

Every CSS element participates in a box model made of content, padding, border and margin.

The content box holds text or child elements. Padding creates space inside the border; the border surrounds the padding and content; margin separates the entire bordered box from neighbors.

With the default box-sizing: content-box, a declared width applies to content only. With border-box, the declared width includes padding and border. Understanding this is essential before learning Flexbox and Grid.

Visible colors reveal the padding, border and outside margin.

HTML

<div class="canvas"><div class="box">Content</div></div>

CSS

.canvas { background: #ffedd5; padding: 1px; }
.box { background: #bfdbfe; padding: 24px; border: 6px solid #7c3aed; margin: 18px; }

Rendered output

Observe: The content is blue, padding stays inside the purple border, and margin separates the box from the outer surface.

Increase padding while preserving the border styling.

HTML

<div class="canvas"><div class="box">More breathing room</div></div>

CSS

.canvas { background: #ffedd5; padding: 1px; }
.box { background: #bfdbfe; padding: 36px; border: 6px solid #7c3aed; margin: 8px; }

Rendered output

Observe: Increasing padding moves content away from the border; reducing margin moves the border toward neighboring content.

The outer footprint of a content-box element consists of content width plus left/right padding and borders; margins add outside spacing.

Compare the two examples: identify the selector, each changed property, and which visible part of the output proves that the CSS took effect.

• Padding is inside the border; margin is outside.
• Declared width does not always represent the final outer footprint.

Change padding to 8px and margin to 30px. Predict which space appears inside versus outside the purple border.

Before changing the code, predict what will change. Then verify by checking the rendered result.

The four regions serve different roles; visualize them before adjusting dimensions.

Revisit the rendered examples if the rule still feels abstract. Change one declaration at a time so you can connect cause and effect.