What Is the CSS Box Model? Sizing, Spacing, and Overflow

Key takeaways

• A CSS box consists of content, padding, border, and margin.
• content-box applies the declared width to content; border-box includes padding and borders.
• Margins remain outside the border box and can collapse in certain block layouts.
• Overflow can also come from content and layout constraints, even when border-box is enabled.

The CSS box model describes the areas around a box’s content: padding, border, and margin. It explains why an element with width: 300px can occupy more than 300 pixels across.

Suppose a card fits perfectly until you add padding. The text becomes easier to read, but the card now extends beyond its container. The browser has not ignored the width. The width may describe only the content area.

Understanding that distinction makes CSS layout problems much easier to investigate.

The four parts of a box

Area	What it does	Example
Content	Holds text, images, or child content	A card’s heading and description
Padding	Adds space inside the border	Breathing room around the text
Border	Surrounds content and padding	A visible card outline
Margin	Adds space outside the border	Separation from another card

Padding belongs to the element’s interior. Margin does not receive the element’s background. Background painting within the box can be adjusted with background-clip.

The box model describes generated CSS boxes, rather than guaranteeing that every HTML element produces exactly one rectangular box. Layout also depends on display behavior; ordinary inline text, for example, can wrap across lines. MDN’s box-model guide explains these distinctions.

Why a 300px card becomes 350px

Consider a block card in normal flow:

.card {
  box-sizing: content-box;
  width: 300px;
  padding: 20px;
  border: 5px solid #334155;
  margin: 10px;
}

With content-box, the declared width applies to content. Add both horizontal padding values and both borders:

300 + 20 + 20 + 5 + 5 = 350px border-box width
350 + 10 + 10 = 370px including horizontal margins

Now change only box-sizing:

.card {
  box-sizing: border-box;
}

The declared 300px includes the padding and borders, leaving 250px for content.

Measurement	content-box	border-box
Declared width	300px	300px
Content width	300px	250px
Border-box width	350px	300px
Width including horizontal margins	370px	320px

These calculations assume the simple layout shown. Flex sizing, minimum and maximum constraints, and other layout rules can affect used dimensions. Padding and borders also impose a floor: the content area cannot become a negative size.

The box-sizing reference describes which dimensions each setting includes.

A practical sizing default

Many projects apply border-box consistently, including to generated pseudo-elements:

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

.card {
  width: 100%;
  max-width: 32rem;
  padding: 1.5rem;
  border: 1px solid #cbd5e1;
}

The card’s percentage width now includes its padding and border. It can fill a narrower container without those layers adding extra width.

Margins still sit outside that width. Adding horizontal margins to a 100%-wide card can create overflow again. For a collection of cards, a parent’s gap often expresses spacing more clearly than margins on every child.

Why vertical margins sometimes overlap

In normal block layout, adjoining vertical margins can collapse. Two positive margins of 24px and 16px may produce a 24px separation rather than 40px.

Collapse can also involve parents and children, or empty blocks, under particular conditions. Negative margins follow different calculations, so “the largest margin wins” is only a useful shorthand for positive margins.

Margins between flex or grid items do not collapse. Horizontal margins do not collapse either. If sibling spacing must be explicit, consider a suitable layout container:

.card-list {
  display: grid;
  gap: 1rem;
}

.card-list > .card {
  margin: 0;
}

The margin-collapse guide details the conditions.

Border-box does not fix every overflow

A long unbroken URL can still extend beyond a card. An oversized image can exceed its available space. A flex or grid item’s automatic minimum size can prevent it from shrinking as expected.

Choose a fix that matches the cause:

.card {
  min-width: 0;
  overflow-wrap: anywhere;
}

.card img {
  max-width: 100%;
  height: auto;
}

Here, min-width: 0 can allow the card to shrink when it is a flex or grid item. Text wrapping handles long strings, while the image rule limits image width. These address different problems; none replaces understanding the container’s layout.

Avoid immediately hiding overflow. Clipping may conceal content while leaving the sizing mistake intact.

Inspect the box before adjusting it

Select the card in browser developer tools and examine its box-model diagram. Compare the computed content size, padding, borders, and margins with your intended dimensions.

Then inspect its parent: is the card in normal flow, flex, or grid? Check minimum widths, fixed child sizes, and long content. Once you know which layer or constraint creates the extra space, the correction is usually smaller and more predictable.

Before changing a width, identify which part of the box that width describes.