CSS Box Model Explained with Examples

The CSS box model describes how browsers size and space every element: each one is a rectangular box made of four layers, the content area, padding, border and margin. By default, the width and height you set apply only to the content area, so padding and borders make the box bigger unless you switch to box-sizing: border-box. Margins sit outside the border and push neighboring boxes away without being part of the box's own size.

Key takeaways#

• Every element box has four layers, from the inside out: content, padding, border and margin.
• With the default content-box, the rendered width is width plus left and right padding plus left and right border.
• border-box makes width include padding and border, which is why most CSS resets apply it to every element.
• Vertical margins between block boxes can collapse into a single margin; horizontal margins never collapse.
• Outlines are drawn outside the border without taking up any space, so they never change the layout.

What is the CSS box model?#

When a browser lays out a page, it turns every element into a rectangular box (MDN: the box model). The CSS Box Model specification names four areas, each wrapping the one inside it:

+---------------------------------------------------+
|                      margin                       |
|    +-----------------------------------------+    |
|    |                 border                  |    |
|    |    +-------------------------------+    |    |
|    |    |            padding            |    |    |
|    |    |    +---------------------+    |    |    |
|    |    |    |       content       |    |    |    |
|    |    |    |   (width x height)  |    |    |    |
|    |    |    +---------------------+    |    |    |
|    |    +-------------------------------+    |    |
|    +-----------------------------------------+    |
+---------------------------------------------------+

1. Content: where text, images and child elements appear. Sized with width and height.
2. Padding: space between the content and the border. The element's background shows through it.
3. Border: a line around the padding, set with border or border-width, border-style and border-color.
4. Margin: transparent space outside the border that separates the box from its neighbors.

What is the difference between content-box and border-box?#

The box-sizing property decides which box width and height measure. Take this card:

.card {
  width: 240px;
  padding: 16px;
  border: 4px solid #333;
  margin: 24px;
}

content-box (the default)

With box-sizing: content-box, width sets only the content area. Padding and border are added on top:

• Rendered width = 240 + 16 + 16 + 4 + 4 = 280px
• Horizontal space it occupies, including margins = 280 + 24 + 24 = 328px

border-box

With box-sizing: border-box, width sets the size up to and including the border. Padding and border are taken out of the content area:

• Rendered width = 240px
• Content area = 240 − 16 − 16 − 4 − 4 = 200px
• Horizontal space it occupies, including margins = 240 + 24 + 24 = 288px

Height works the same way. Because border-box makes a declared size match what you see on screen, many projects set it once for every element:

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

One edge case: in border-box, the content area can't shrink below zero. If padding and border add up to more than width, the box grows to fit them.

Why do margins collapse?#

Margin collapsing is a rule of normal block layout: when the top and bottom margins of block boxes touch, they combine into one margin the size of the largest of them, instead of adding up (MDN: mastering margin collapsing). It exists so that text spacing stays even. A heading with a bottom margin followed by a paragraph with a top margin gets one gap, not a double one.

It happens in three cases:

1. Adjacent siblings: margin-bottom: 24px on one paragraph and margin-top: 16px on the next produce a 24px gap, not 40px.
2. Parent and first or last child: if nothing separates them (no border, padding, inline content, or a new block formatting context), a child's top margin collapses with its parent's and appears outside the parent. This is why a heading's margin can push its whole container down.
3. Empty blocks: an element with no height, padding, border or content lets its own top and bottom margins collapse together.

With negative margins, the result is the largest positive margin plus the most negative one. For example, 30px and −10px collapse to 20px.

Margins only collapse in the vertical (block) direction. They don't collapse for floated or absolutely positioned elements, or between items in a flex or grid container. To stop a parent from collapsing with its children, give it padding or a border, or create a new block formatting context with display: flow-root.

How does display change the box model?#

The same padding and margin behave differently depending on an element's outer display type:

Elements such as <div>, <p> and <h1> are block boxes by default; <span>, <a> and <strong> are inline. A common fix for "my padding on a link overlaps the line above" is to make the link display: inline-block, so its vertical padding takes up space.

What is the difference between outline and border?#

An outline looks like a border but isn't part of the box model. It's drawn outside the border edge and takes up no space, so adding or removing one never moves anything on the page.

Browsers use outlines to show keyboard focus. If you remove them with outline: none, provide another visible focus style. A quick debugging trick is * { outline: 1px solid red; }, which reveals every box without shifting anything.

How do you inspect the box model in DevTools?#

Every major browser shows the box model for the element you select:

• Chrome and Edge: right-click an element, choose Inspect, and open the sidebar next to the Styles tab to see the box model diagram. Double-click a value to edit it.
• Firefox: open the Inspector and select the Layout panel to see the Box Model section.

Hovering over the diagram highlights each layer on the page, which makes collapsed margins and unexpected padding easy to spot.

Try it: a runnable box model example#

Paste this into the HTML, CSS & JavaScript editor. Both boxes declare width: 240px, and the script prints each box's measured width, border to border:

<style>
  body { font-family: system-ui, sans-serif; padding: 16px; }

  .box {
    width: 240px;
    padding: 16px;
    border: 4px solid #333;
    margin: 24px 0;
    background: #dbeafe;
  }
  .content-box { box-sizing: content-box; }
  .border-box  { box-sizing: border-box; }

  /* Margin collapsing: the gap between these is 24px, not 40px */
  .first  { margin-bottom: 24px; background: #fde68a; }
  .second { margin-top: 16px;    background: #bbf7d0; }

  /* Inline vs inline-block padding */
  .tag { padding: 8px; background: #fbcfe8; }
  .tag.block { display: inline-block; }
</style>

<div class="box content-box">content-box</div>
<div class="box border-box">border-box</div>

<p class="first">margin-bottom: 24px</p>
<p class="second">margin-top: 16px</p>

<p>An <span class="tag">inline</span> span and an
  <span class="tag block">inline-block</span> span.</p>

<script>
  document.querySelectorAll('.box').forEach((box) => {
    box.textContent += ': ' + box.offsetWidth + 'px wide';
  });
</script>

The first box reports 280px and the second 240px, matching the arithmetic above. Try removing margin-top from .second: the gap doesn't change, because the larger 24px margin already wins.

Common box model mistakes#

1. width: 100% plus padding. With content-box, the element overflows its parent by the padding and border. Use border-box.
2. Expecting vertical margins to add up. Adjacent block margins collapse to the largest value. Use gap in a flex or grid container when you want exact spacing.
3. A child's margin pushing the parent down. That's parent-child margin collapsing. Add padding to the parent or use display: flow-root.
4. Setting width or vertical margins on inline elements. They're ignored. Switch to inline-block or block.

For selectors, Flexbox and media queries, read CSS basics: box model, selectors and Flexbox. Once boxes size predictably, CSS Grid vs Flexbox explains how to arrange them.

Frequently asked questions#

What is the CSS box model?

The CSS box model is the set of rules browsers use to size and space elements. Every element is a rectangular box with four layers: the content area, padding around the content, a border around the padding and a margin outside the border. Together they decide how much space the element takes on the page.

What is the difference between content-box and border-box?

With content-box, the default, width and height set only the content area, and padding and border are added on top. With border-box, width and height include padding and border, so the element's visible size matches the value you set. A 240px box with 16px padding and a 4px border renders 280px wide in content-box.

Why do margins collapse?

Vertical margins collapse so that spacing between blocks of text stays consistent instead of doubling. When the top and bottom margins of block elements touch, the browser uses the largest of them. It doesn't happen horizontally, in flex or grid containers, or for floated and absolutely positioned elements. Padding, borders or display flow-root prevent it.

Does padding increase element width?

With the default content-box sizing, yes: left and right padding are added to the declared width, so a 240px element with 16px padding on each side renders 272px wide before borders. With box-sizing set to border-box, padding is taken out of the content area instead, and the rendered width stays exactly what you declared.

Is margin part of the element's size?

No. Margin sits outside the border, so it isn't included in an element's width, height or background area, whichever box-sizing value you use. It does, however, add to the space the element occupies in the layout, pushing neighboring elements away. Vertical margins between blocks can also collapse, unlike padding and borders.