Box model calculation in CSS - Browser Rendering Trace

Render Flow - Box model calculation

Parse CSS rules

↓

Match selector to element

↓

Calculate box model values: content, padding, border, margin

↓

Calculate total element size

↓

Layout element with total size

↓

Paint element with colors and borders

↓

Composite layers to screen

The browser reads CSS rules, matches them to elements, calculates the box model sizes including content, padding, border, and margin, then lays out and paints the element accordingly.

Render Steps - 4 Steps

Code Added:width: 10rem;

Before

[box]
|Content|

→

After

[box: 10rem wide]
|Content________|

Setting width defines the content area width to 10rem, so the box's content area becomes wider.

🔧 Browser Action:Calculate content width, trigger reflow

Code Sample

A box with content area, padding inside, a thick border, and space outside margin, shown with a light blue background.

CSS

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

CSS

.box {
  width: 10rem;
  padding: 1rem;
  border: 0.5rem solid black;
  margin: 2rem;
  background-color: lightblue;
}

Render Quiz - 3 Questions

After applying step 3 (border), what changes visually to the box?

A The content area shrinks but no border is visible

B Margin space increases outside the box

C A visible border appears around the box increasing its total size

D Padding disappears inside the box

Common Confusions - 3 Topics

Why does the total box size become bigger than the width I set?

Because width sets only the content area. Padding, border, and margin add extra space outside content, making the total box bigger. See render_steps 2 and 3 where padding and border increase size.

💡 Width = content only; padding + border + margin add outside space.

Why doesn't margin add color or background around the box?

Margin is transparent space outside the border. It does not get background color or border. See render_step 4 where margin adds space but no color.

💡 Margin is empty space outside the box.

If I add padding, why does the box grow instead of content shrinking?

Padding adds space inside the box around content, increasing total box size. Content width stays the same unless box-sizing is changed. See render_step 2.

💡 Padding adds inside space, box grows.

Property Reference

Property	Value Applied	Effect on Box	Visual Effect	Common Use
width	10rem	Sets content width	Content area width changes	Define box size
padding	1rem	Adds space inside border	Content moves inward, box grows	Space inside box
border	0.5rem solid black	Adds border thickness	Visible border around padding	Decorative outline
margin	2rem	Adds space outside border	Separates box from others	Spacing between elements

Concept Snapshot

Box model parts: content, padding, border, margin. Width sets content size only. Padding adds inside space, grows box. Border adds visible outline, grows box. Margin adds outside space, separates boxes. Total size = content + padding + border + margin.