Stop 03 · CSS3Topics · 2/17

Box Model

In short

Every element on a page is a rectangle. Once you see the four layers of that rectangle, spacing stops being guesswork and layouts stop randomly overflowing.

Every element is a box made of content, padding, border and margin — understanding how these stack and collapse is essential for layout debugging. Many sizing and spacing bugs become straightforward once you can calculate an element's rendered dimensions and identify whether padding, border, margin, or `box-sizing` is responsible.

The jaadu mascot opens a parcel showing a phone wrapped in bubble wrap, with other parcels spaced apart.

Think of it like this

A Flipkart parcel

The phone is the content. The bubble wrap around it is padding. The cardboard box is the border. And the gap the delivery guy leaves between your parcel and the next one in his bag is the margin.

Watch it happen

A 300px card, from inside out

Content

Padding

Border

Margin

1/4With border-box and width: 300px, the content area is 300 minus 32 minus 4, so 264px.

The big ideas

What you need to know

Four layers

From inside out: content, padding, border, margin. Background colour fills content and padding, never margin.

Use border-box

With box-sizing: border-box, width includes padding and border. A 300px box stays 300px no matter the padding.

Vertical margins collapse

When two block elements stack, their top and bottom margins merge. 20px and 30px gives a 30px gap, not 50px.

DevTools shows it

Inspect any element and look for the coloured box diagram. It shows every layer's exact size.

See it in code

Walk through the code

css

1/* Put this at the top of every project */2*, *::before, *::after {3  box-sizing: border-box;4}5 6.card {7  width: 300px;          /* total width, including padding + border */8  padding: 16px;         /* space inside the border */9  border: 2px solid #ddd;10  margin: 24px auto;     /* space outside, auto centres it */11}

1/4border-box makes width include padding and border, for every element and pseudo-element.

Without border-box, this card would be 300 + 32 + 4 = 336px wide. With it, the content area shrinks so the total stays 300px.

Save yourself the pain

Common mistakes

Oops

Using margin to create space inside a button.

Do this instead

Inner space is padding. Margin pushes other elements away.

Oops

Setting width: 100% plus padding and getting a horizontal scrollbar.

Do this instead

Add box-sizing: border-box so padding is counted inside the width.

Your mission

Measure a real site

~15 min

Quick check

Two paragraphs are stacked. The first has margin-bottom: 20px, the second has margin-top: 30px. What's the gap?

Go deeper

1Toggle `box-sizing: border-box` vs `content-box` and see the size difference. Validate your understanding by applying it in a small practical example.
2Inspect the box model diagram in DevTools for any element. Validate your understanding by applying it in a small practical example.
3Learn margin collapsing between adjacent vertical margins.