Box model in CSS: the invisible rectangle behind every element

Open your browser's developer tools, click any element on a page, and a tab called "Box Model" will show four nested rectangles. That is not a tooling detail: it is how CSS sees every element, from the smallest button to the whole page. A heading, an image, a product card, all of them are, to the rendering engine, a stack of concentric rectangles.

Understanding this box model changes how a layout gets read. An element overflowing its container, a card wider than expected, a button whose clickable area does not match what is seen: the cause is almost always found in one of the box's four layers, misunderstood or miscalculated.

Definition

The box model describes the four concentric zones that make up every element rendered by the browser: the content, the padding, the border and the margin. These four zones always stack in the same order, from the inside out, and each plays a specific role in the element's final size and visual appearance.

.card {
  width: 240px;
  padding: 20px;
  border: 2px solid #1f2937;
  margin: 16px;
  background-color: #f9fafb;
}

This single rule is enough to bring all four layers into existence: 240 pixels of content, wrapped in 20 pixels of air before reaching a 2-pixel line, itself separated from neighbouring elements by 16 pixels of empty space. The light grey background stops exactly at the border: the margin, on the other hand, always stays transparent, whatever background colour is set.

The four layers, one by one

Each layer behaves differently around background and border, which explains the common confusion beginners have between padding and margin.

This distinction guides a useful reflex in practice: if a space needs to change colour on hover or carry a shadow, it is padding. If it only needs to push the box away from a neighbouring element without ever displaying anything in it, it is margin.

Working out a box's total size

By default, the width property only sets the width of the content, not the whole box actually visible on screen. To know the space really occupied, padding and border need to be added on both sides.

.card {
  width: 240px;
  padding: 20px;
  border: 2px solid #1f2937;
}

/* Width actually occupied on screen:   240 + (20 * 2) + (2 * 2) = 284px */

This calculation surprises almost everyone the first time around: a box declared at 240 pixels actually takes up 284. This is the browser's default behaviour, called content-box, covered in box-sizing. Nearly every professional project changes it in the very first line of its stylesheet, precisely to stop doing this arithmetic by hand.

Checking a box in developer tools

Rather than calculating by hand, open your browser's inspector, select an element, and look for the tab called Layout or Computed depending on the browser. A diagram shows all four layers with their exact values, including ones inherited from a stylesheet you did not write yourself, such as the browser's default styles.

It is the fastest way to diagnose an unexpected overflow: if an element exceeds its container by exactly the width of a border or a padding, the box model is almost always the cause, well before display or overflow are worth checking. Our HTML and CSS course walks through this inspection step before fixing any layout bug, to build the habit of reading the box model instead of guessing at it.

Frequently asked questions

By default, no: width only sets the content, padding and border are added on top of that value. That is exactly the behaviour box-sizing lets you reverse, so padding and border are included in the declared width instead of added to it.

The background extends to the outer edge of the border, never beyond: the margin always stays transparent, whatever background colour is set on the element. If a space around an element needs to carry a colour, it needs to become padding, never margin.

Yes, but their vertical effect stays limited: the vertical margin and padding of an inline element do not push neighbouring lines of text away, unlike their horizontal equivalents, which are fully active in both directions. That is one of the reasons for switching an element to display: inline-block or display: block as soon as vertical spacing is needed.