The CSS Box Model, Explained: Content, Padding, Border

The CSS box model is the rule every browser follows to figure out how much space an element takes up. Every element on a page — a paragraph, a button, an image, a div — is rendered as a rectangular box built from four concentric layers: the content, the padding, the border, and the margin. Understanding how those layers combine is the difference between layouts that behave and layouts that fight you.

The four layers

Working from the inside out, every box is made of the same four regions:

• Content — the actual text, image, or child elements. Its size is controlled by width and height.
• Padding — transparent space inside the border, between the content and the edge. Padding takes on the element’s background color.
• Border — a line drawn around the padding. It has a width, style, and color.
• Margin — transparent space outside the border that pushes neighboring elements away. Margins are always transparent and never show the background.

You can picture it as a framed photo: the photo is the content, the mat around it is the padding, the frame is the border, and the empty wall space you leave between frames is the margin.

Why the same width can render at different sizes

Here’s the part that trips up nearly everyone. By default, the width and height properties apply only to the content box. Padding and border are added on top of that value. So this element:

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

is not 300px wide on screen. The browser computes 300 + 20 (left padding) + 20 (right padding) + 2 (left border) + 2 (right border) = 344px. The content is 300px; everything else is extra. Set a .card to width: 100% inside a fixed container, add any padding, and it overflows — a classic source of horizontal scrollbars.

box-sizing: the one property that fixes it

The box-sizing property changes what width and height measure.

• box-sizing: content-box — the default. width sizes the content only; padding and border are added on.
• box-sizing: border-box — width sizes the content plus padding plus border. The number you set is the number you get on screen.

With border-box, the .card above is exactly 300px wide, and padding eats into that space instead of expanding the box. Because this is almost always what you actually want, the near-universal convention is to apply it globally at the top of a stylesheet:

*,
*::before,
*::after {
  box-sizing: border-box;
}

Set this once and element sizing becomes predictable across the whole project. Most CSS frameworks and resets do it for you.

Margins collapse — padding never does

Vertical margins have a quirk that padding doesn’t: margin collapse. When two block elements sit on top of each other, their adjacent vertical margins don’t add together — the larger of the two wins. A paragraph with margin-bottom: 30px followed by one with margin-top: 20px produces a 30px gap, not 50px. Collapsing also happens between a parent and its first or last child when no border or padding separates them.

This is deliberate — it keeps stacked text blocks evenly spaced — but it surprises people who expect the numbers to sum. If you need margins to behave predictably, a common trick is to reach for a layout method that doesn’t rely on margins at all, which brings us to modern layout.

The box model in modern layout

The box model describes a single box. Laying out many boxes is the job of layout algorithms like Flexbox and Grid, and they interact with the box model in useful ways. In a flex or grid container, the gap property spaces items apart without using margins, sidestepping margin collapse entirely — one reason Grid and Flexbox have largely replaced margin-based spacing hacks. If you’re new to styling in general, our overview of what CSS is sets the stage, and container queries show how boxes can respond to their parent’s size rather than the viewport.

Because every element is a box, the box model also underpins how the browser paints and reflows the page. When you change a width, padding, or margin, the browser has to recompute layout for that box and often its neighbors — a step called reflow. Doing this constantly during scroll or animation is a common performance trap; our Core Web Vitals guide explains how layout shifts hurt real user metrics. The boxes you define in CSS are ultimately nodes in the DOM, and their geometry is what the rendering engine measures.

A quick mental checklist

When an element isn’t sized the way you expect, walk the layers in order:

1. Is box-sizing set? If not, remember padding and border are adding to your width.
2. Where’s the space coming from? Inside the border it’s padding; outside it’s margin. Toggle a background color to see padding light up.
3. Are margins collapsing? If a vertical gap is smaller than the sum you set, collapse is why.
4. Is the box overflowing its parent? Almost always a width: 100% plus padding under content-box.

Every browser ships a DevTools box-model inspector that draws these four layers as colored rings around the selected element. Hovering over a box and reading those numbers is the fastest way to see the model in action, and it will teach you more than any diagram.

The takeaway

Every element is a box with four layers — content, padding, border, margin — and width measures only the content unless you tell it otherwise. Set box-sizing: border-box globally so your dimensions mean what they say, remember that vertical margins collapse to the larger value, and use gap in Flexbox or Grid to space items without margin surprises. Once the box model is second nature, most “why is this element the wrong size” mysteries solve themselves.