Box sizing in CSS - Browser Rendering Trace

Render Flow - Box sizing

Parse CSS rule: box-sizing

↓

Match elements with selector

↓

Calculate box model dimensions

↓

Apply box-sizing property

↓

Calculate final width and height

↓

Layout elements

↓

Paint elements

↓

Composite layers

The browser reads the box-sizing property, then calculates the element's size including or excluding padding and border, affecting layout and painting.

Render Steps - 4 Steps

Code Added:width: 10rem;

Before

[box]
Content

→

After

[box________]
Content

The box now has a fixed width of 10rem, but no padding or border yet.

🔧 Browser Action:Calculate element width and allocate space

Code Sample

A box with fixed width that includes padding and border inside the total width.

CSS

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

CSS

.box {
  width: 10rem;
  padding: 1rem;
  border: 0.5rem solid black;
  box-sizing: border-box;
}

Render Quiz - 3 Questions

After applying step 3, what happens to the total width of the box compared to the width set in step 1?

A The total width becomes smaller than 10rem.

B The total width stays exactly 10rem including padding and border.

C The total width is larger than 10rem because padding and border add extra space.

D The width resets to auto.

Common Confusions - 2 Topics

Why does adding padding make my box bigger than the width I set?

Because the default box-sizing is content-box, padding adds extra space outside the set width, increasing total size (see step 2).

💡 Padding adds space inside the box but outside content, increasing total size unless border-box is used.

Why does my content area shrink when I use border-box?

Border-box keeps total width fixed, so padding and border reduce the space left for content (see step 4).

💡 With border-box, total size stays fixed; content area adjusts to fit padding and border inside.

Property Reference

Property	Value	Effect on Box Model	Visual Effect	Common Use
box-sizing	content-box	Width/height exclude padding and border	Box grows with padding/border	Default, traditional box model
box-sizing	border-box	Width/height include padding and border	Box size fixed, content shrinks	Modern layouts, easier sizing

Concept Snapshot

box-sizing controls how width and height are calculated. content-box (default) excludes padding and border from width/height. border-box includes padding and border inside width/height. Using border-box makes sizing easier by fixing total box size. Padding and border affect total size differently depending on box-sizing.