CSS Box Model Explained Simply: A Beginner's Guide to Layout

Open any website and squint a little. Every heading, image, button and paragraph is really a rectangle. The CSS box model is the set of rules that decides how big each rectangle is and how much space sits around it. Once it clicks, a lot of "why is this element wider than I set?" mysteries disappear.

This guide walks through the four layers of a box, the one line of CSS that makes sizing predictable, and the quirks that catch beginners. If selectors and properties still feel new, read our CSS basics guide first.

The four layers of every box

From the inside out, each box has:

1. Content: the text, image or other stuff you actually see.
2. Padding: breathing room between the content and the border. It takes on the element's background color.
3. Border: a line (or nothing) that wraps the padding.
4. Margin: empty space outside the border that pushes other elements away. It is always transparent.

A picture frame is a handy comparison. The photo is the content, the white mat is the padding, the frame is the border, and the gap between the frame and the next frame on the wall is the margin.

.card {
  width: 300px;
  padding: 20px;
  border: 2px solid #333;
  margin: 16px;
}

That rule gives the card 20px of padding on every side, a 2px border and 16px of space around it. The interesting question is how wide the card really is, and the answer depends on one property.

Why your box is wider than you asked for

By default, browsers use box-sizing: content-box. That means width only applies to the content. Padding and border get added on top.

So the card above takes up more than 300px:

// Total width with the default content-box sizing
const content = 300;
const padding = 20 * 2;   // left + right
const border = 2 * 2;     // left + right
console.log(content + padding + border); // prints 344

The box is 344px wide, not 300px. Put two of these side by side in a 600px container and they will not fit. This is the most common box model surprise.

The fix: border-box

With box-sizing: border-box, the width you set includes padding and border. The content shrinks to make room, and the box stays exactly 300px.

/* Put this at the top of your stylesheet */
*,
*::before,
*::after {
  box-sizing: border-box;
}

Most developers add this reset to every project because it makes the math match what you see in your head. If you say a column is 50% wide, it stays 50% wide even after you add padding.

Padding and margin shorthand

Both properties accept one to four values, and the order trips people up at first. Remember it as a clock: start at the top and go clockwise.

• padding: 10px; sets all four sides.
• padding: 10px 20px; sets top and bottom to 10px, left and right to 20px.
• padding: 10px 20px 30px; sets top, left and right, then bottom.
• padding: 10px 20px 30px 40px; sets top, right, bottom, left.

You can also set a single side with padding-left, margin-top and so on. The same shorthand works for margin and border-width.

Related reading: CSS Flexbox Guide: Align Elements Easily for Beginners

Margin quirks worth knowing

Vertical margins collapse

When two block elements sit one above the other, their vertical margins do not add up. The larger one wins. If one paragraph has a bottom margin of 30px and the next has a top margin of 20px, the gap is 30px, not 50px.

Margin collapse only happens vertically, and only in normal flow. Elements inside a flex or grid container do not collapse, which is one reason layouts built with CSS grid feel more predictable.

Centering with auto margins

A block element with a set width can be centered by letting the browser split the leftover space:

.container {
  width: 800px;
  margin: 0 auto; /* no vertical margin, equal left and right */
}

Negative margins

Margins can be negative, which pulls an element toward its neighbors. It works, but use it sparingly because it makes layouts harder to reason about.

Block and inline boxes behave differently

Not every element treats width, height and vertical spacing the same way. Block elements such as div and p start on a new line and stretch to fill their parent. Inline elements such as span and a sit inside a line of text, ignore width and height, and push neighbors away only horizontally with margin. If your spacing seems to be ignored, check the display type. Our guide to inline vs block elements covers this in detail, and display: inline-block gives you a middle path.

See the box model in your browser

You do not have to guess. Right-click any element, choose Inspect, and look at the Computed or Layout tab. Browsers draw the box model as nested colored rectangles, with the exact pixel values for content, padding, border and margin. Hover over an element in the page and the tool highlights each layer. Ten minutes poking around real sites teaches more than most tutorials.

Common mistakes

• Forgetting that padding adds to the width when box-sizing is the default.
• Using margin when you wanted padding. If the background color should extend into the space, you want padding.
• Expecting height to hold content that is taller. Content overflows the box instead.
• Adding margin to inline elements and wondering why the vertical space does nothing.
• Stacking fixed widths plus padding inside a percentage-width parent, which causes overflow and horizontal scrollbars.

When you are ready to move elements out of normal flow, the next topic is CSS position, and you can find more beginner topics in the CSS category.

Conclusion

The box model is simple once you remember it is just four nested layers. The main points:

• Every element is a box made of content, padding, border and margin.
• Padding sits inside the border, margin sits outside it.
• Add box-sizing: border-box everywhere so widths include padding and border.
• Vertical margins between block elements collapse to the larger value.
• Use browser developer tools to check the real numbers.