The CSS Box Model,
completely explained.

When browsers were invented, designers needed a way to control where things go and how much space they take up. Without a system, every element would crash into every other.

The Box Model is that system. It gives every element a personal "bubble" of space — structured into four layers — so the browser always knows exactly how much room to reserve for it.

Every time a browser loads a page, it goes through a process called layout (or "reflow"). During layout, it asks: "Where should this element go, and how big should it be?"

The answer comes entirely from the Box Model. The browser calculates each element's box dimensions, stacks them according to the document flow, and paints them to screen.

Understanding this helps you reason about performance. Changing a box model property like width or padding triggers a reflow — the browser must recalculate layout. Changing only background-color skips layout and goes straight to paint.

This is where most beginners get confused. When you write width: 200px, does the element take up 200px? Not necessarily.

It depends on the box-sizing property. In the default mode (content-box), width only sets the content area width. Padding and border are added on top.

So if you set width: 200px, padding: 20px, and border: 5px solid, the element actually takes up:

Padding is the space inside the border, between the content and the edge of the element. Think of it as "internal breathing room."

Padding inherits the element's background color — so it visually looks like part of the element. You can click on padding; it responds to mouse events just like content.

Padding can be set on all four sides independently:

The border sits between the padding and the margin. It's a visual frame around your element. Unlike padding (which is always transparent to background colors), border has its own color.

Every border has three required attributes: width, style, and color.

Remember: border adds to the element's total width and height in default (content-box) mode. A 2px border adds 4px to the total width (2px left + 2px right).

Margin is the transparent space outside the border. It pushes other elements away. Unlike padding, margin cannot be clicked on and has no background color — it's always invisible.

Margin creates breathing room between elements. Use it to control how elements relate spatially to one another.

Margin accepts negative values, which pulls elements closer together (or even overlaps them). This is useful for advanced layout techniques.

margin: auto is a powerful trick for horizontal centering — the browser splits the remaining space equally on both sides.

Here's one of CSS's most surprising behaviors: when two vertical margins meet, they collapse into one. The larger of the two margins wins — they don't add up.

Margin collapsing only happens vertically (top/bottom), not horizontally. It also only happens between block-level elements that are direct siblings or parent/child.

When does collapsing NOT happen? When there's a border, padding, or overflow property between parent and child, or when elements are flex/grid children.

The box-sizing property fundamentally changes how width and height are calculated. It's one of the most important CSS properties to understand.

Most modern projects use this global reset at the top of their CSS to make everything predictable: