The box model

Why this matters

Every element on a web page is a rectangle, a box. Spacing, sizing and most "why is this 20 pixels too wide?" bugs come down to how those boxes are measured. Once the box model clicks, you can space anything precisely and debug layouts in seconds with developer tools.

The four layers

From the inside out, every box has:

1. Content: the text or image itself, sized by width and height.
2. Padding: space inside the box, between the content and the border. It shows the element's background colour.
3. Border: a line around the padding (it can be zero width).
4. Margin: space outside the box, pushing other boxes away. It is always transparent.

.plan {
  padding: 1.5rem;              /* inside space */
  border: 2px solid #cbd5e1;    /* width, style, colour */
  margin-bottom: 1.5rem;        /* outside space */
}

A simple test for which one you need: if the background should extend into the space, use padding; if the space should separate this box from others, use margin.

Shorthand values

Padding and margin accept one to four values, going clockwise from the top:

padding: 1rem;                 /* all four sides */
padding: 0.75rem 1.25rem;      /* top & bottom, left & right */
padding: 1rem 2rem 0.5rem;     /* top, left & right, bottom */
padding: 1rem 2rem 0.5rem 0;   /* top, right, bottom, left */

You can also set one side: margin-top, padding-left and so on. margin: 0 auto on a block with a width or max-width centres it horizontally.

The sizing surprise, and the fix

By default (box-sizing: content-box), width sets only the content width. Padding and border are added on top:

width: 280px + padding 24px left + 24px right + border 2px + 2px
= 332px on screen

That is why adding padding makes boxes overflow their columns. The fix almost every modern stylesheet starts with:

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

With border-box, width: 280px means the whole box, including padding and border, is 280px; the content area shrinks to fit. Sizes now mean what you expect.

Block and inline boxes

• Block elements (div, p, h1, section, article, ul) start on a new line and stretch to the full available width. Width, height, padding and margin all work.
• Inline elements (a, span, strong, em) sit within a line of text. Width and height are ignored, and vertical margin does not push other lines away.
• display: inline-block sits in a line like inline, but respects width, height and padding like block. It is handy for button-style links.

Margin collapsing

When two vertical margins meet, for example the bottom margin of one paragraph and the top margin of the next, they collapse into one margin the size of the larger, instead of adding up. A margin-bottom: 24px followed by margin-top: 16px gives a 24px gap, not 40px. This only happens with vertical margins of block boxes in normal flow; it does not happen inside flex or grid containers, which is one more reason to use gap there.

Worked example: inspecting a box

1. Right-click a card and choose Inspect.
2. In the Computed tab (or Layout in Firefox), find the box-model diagram: content in the middle, then padding, border and margin, each with its values.
3. Hover over the element in the Elements panel: the page highlights content in blue, padding in green and margin in orange.
4. Change a value such as padding: 1.5rem directly in the Styles pane and watch the diagram update.

This diagram is the fastest way to answer "where is this extra space coming from?". Very often it is a default margin from the browser on a heading, paragraph or list.

Browser defaults

Browsers give body an 8px margin, headings and paragraphs top and bottom margins, and lists left padding. Many developers start with body { margin: 0; } and set heading and paragraph margins deliberately rather than relying on the defaults.

Common mistakes

• Using margin when you want the background to grow (you need padding).
• Forgetting box-sizing: border-box, then fighting overflowing widths.
• Giving an inline <a> a width or vertical padding and wondering why the layout does not change; use inline-block or block.
• Being surprised by collapsed margins between stacked paragraphs.
• Fixed heights on boxes with text, which overflow when the text wraps or the user zooms. Let content set the height.

Quick recap

• Content, padding (inside), border, margin (outside).
• Shorthands go clockwise from the top.
• box-sizing: border-box makes width include padding and border.
• Block, inline and inline-block behave differently; vertical margins between blocks collapse.
• The box-model diagram in developer tools shows every layer.

Try it

Open the Do tab and give a pair of pricing cards proper padding, borders and spacing with border-box sizing.