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.

Practice

1. Which parts of the CSS box model add space inside the element's border?

easy

A. Margin and padding

B. Padding and content

C. Margin and border

D. Border and margin

Solution

1. Step 1: Understand box model parts

   The box model has content, padding, border, and margin. Padding is inside the border, margin is outside.

2. Step 2: Identify inside spaces

   Padding adds space inside the border, content is inside padding. Margin is outside the border.

3. Final Answer:

   Padding and content -> Option B

4. Quick Check:

   Inside space = padding + content [OK]

Hint: Padding is inside border; margin is outside [OK]

Common Mistakes:

• Confusing margin as inside space
• Thinking border adds inside space
• Mixing padding with margin

2. Given this CSS, what is the total width of the element?

width: 200px; padding: 10px; border: 5px solid; margin: 20px;

easy

A. 250px

B. 270px

C. 270px plus margin

D. 250px plus margin

Solution

1. Step 1: Calculate width including padding and border

   Width = content width (200px) + padding left+right (10px*2=20px) + border left+right (5px*2=10px) = 230px.

2. Step 2: Add margin outside the box

   Margin left+right = 20px*2 = 40px. Total space taken horizontally = 230px + 40px = 270px.

3. Final Answer:

   270px plus margin -> Option C

4. Quick Check:

   Total width = content + padding + border + margin [OK]

Hint: Add padding and border twice, margin outside [OK]

Common Mistakes:

• Forgetting to double padding and border for both sides
• Including margin inside width
• Adding margin only once

3. What is the total height of this element including padding and border?

height: 150px; padding: 15px 10px; border: 3px solid;

medium

A. 186px

B. 150px

C. 176px

D. 181px

Solution

1. Step 1: Calculate vertical padding and border

   Padding top+bottom = 15px * 2 = 30px. Border top+bottom = 3px * 2 = 6px.

2. Step 2: Add padding and border to content height

   Total height = content height (150px) + padding (30px) + border (6px) = 186px.

3. Final Answer:

   186px -> Option A

4. Quick Check:

   Total height = content + padding + border [OK]

Hint: Add vertical padding and border twice to height [OK]

Common Mistakes:

• Using horizontal padding values for vertical calculation
• Forgetting to double padding and border
• Ignoring border size

4. This CSS code is meant to create a box 300px wide including padding and border. What is wrong?

width: 300px; padding: 20px; border: 10px solid;

medium

A. The box will be wider than 300px

B. The box will be exactly 300px wide

C. Padding and border are ignored in width

D. The box will be narrower than 300px

Solution

1. Step 1: Calculate total width with padding and border

   Content width is 300px, but padding adds 20px*2=40px and border adds 10px*2=20px, total 360px.

2. Step 2: Understand box-sizing default

   By default, width sets content box only, so padding and border add outside, making box wider than 300px.

3. Final Answer:

   The box will be wider than 300px -> Option A

4. Quick Check:

   Default box-sizing excludes padding and border [OK]

Hint: Width excludes padding and border unless box-sizing set [OK]

Common Mistakes:

• Assuming width includes padding and border by default
• Ignoring box-sizing property
• Not doubling padding and border

5. You want a box with total width 400px including padding and border. Padding is 15px and border is 5px. What should the CSS width be if box-sizing: content-box;?

hard

A. 430px

B. 400px

C. 350px

D. 360px

Solution

1. Step 1: Calculate total padding and border width

   Padding left+right = 15px * 2 = 30px. Border left+right = 5px * 2 = 10px. Total extra = 40px.

2. Step 2: Subtract padding and border from total width

   Desired total width = 400px. Content width = 400px - 40px = 360px.

3. Step 3: Confirm CSS width value

   Set width: 360px; to get total 400px box size with content-box sizing.

4. Final Answer:

   360px -> Option D

5. Quick Check:

   width = total - (padding + border) [OK]

Hint: Subtract padding and border from total width [OK]

Common Mistakes:

• Adding padding and border instead of subtracting
• Forgetting to double padding and border
• Confusing content-box with border-box