The CSS Box Model: Margin, Border, Padding, and Content

The CSS box model in one sentence

Every rendered element generates one or more boxes. For a basic block box, the CSS box model describes four nested areas: content, padding, border, and margin. The box-sizing property decides whether a declared width or height measures the content box or the border box.

The CSS Box Model specification defines the same inside-to-outside order:

The order does not change. What does change is which edge a sizing property measures, how an element participates in layout, and whether adjoining margins collapse.

The four areas, precisely

Content

The content box holds the element's text, image, or descendant boxes. With box-sizing: content-box, a declared width and height size this area. If a normal block box has width: auto, it generally fills the available inline space after its margins, borders, and padding are accounted for; that is more precise than saying every block is simply 100% wide.

Padding

Padding creates space between the content and border. It belongs to the element, so the element's background and hit area extend through it.

.button {
  padding: 12px 20px; /* top/bottom, then left/right */
}

The shorthand accepts one to four values in top, right, bottom, left order. Physical longhands include padding-top; logical alternatives include padding-block and padding-inline. Padding cannot be negative.

One percentage trap is worth learning early. Under the current CSS Box Model specification, percentage padding on any side refers to the containing block's logical width. That means padding-top: 10% is not normally ten percent of the containing block's height.

Border

A border occupies the area between padding and margin. The shorthand accepts width, style, and color:

.card {
  border: 2px solid #d0d0d0;
}

The initial border-style is none, so setting only border-width does not produce a visible border. Border width still participates in box sizing when a border is present.

Other border styles include dashed and dotted; the key point is that a non-none style must participate before the border is painted.

Margin

Margin is transparent space outside the border. It may be positive, zero, negative, or auto. Negative margin can pull boxes together or make them overlap; it does not create negative padding.

For example, margin-top: -10px shifts a box upward in the common horizontal writing mode; whether it overlaps another box depends on the surrounding layout.

margin: 0 auto can center a normal block horizontally when its used width is narrower than the available inline space. It is not a universal centering command: an auto-width block already fills the available space, and other layout modes resolve auto margins by their own rules.

Margin or padding?

Use the border edge as the decision line:

• Use padding when the space belongs inside the element's border, should show its background, or should enlarge the hit area of an interactive element.
• Use margin when the space separates this box from neighboring boxes and should remain transparent.

For example, padding makes an entire button-style link easier to click and gives its hover background room. Margin separates that link from the next item. For the lengths used in these declarations, see the CSS units guide.

What box-sizing changes

The initial value of box-sizing is content-box. In that model, declared width applies to the content box and padding and border are added outside it.

.box {
  width: 300px;
  padding: 20px;
  border: 5px solid black;
  /* Border-box width = 300 + 20 + 20 + 5 + 5 = 350px */
}

With border-box, the declared width includes content, padding, and border:

.box {
  box-sizing: border-box;
  width: 300px;
  padding: 20px;
  border: 5px solid black;
  /* Border-box width = 300px; content width = 250px */
}

Margin is excluded in both modes. A 300px border-box with 10px left and right margins occupies 320px in an ordinary non-collapsing horizontal calculation.

MDN's current box-sizing reference also records an exception to the usual-default shorthand: browsers normally style <table>, <select>, <button>, and several <input> types with border-box. Inspect a form control's computed value instead of assuming content-box.

Use a reset that pseudo-elements inherit

Applying border-box globally is a common way to make component sizing predictable. This form lets a component override the value on its root and pass that choice to descendants and pseudo-elements:

html {
  box-sizing: border-box;
}

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

MDN marks box-sizing as widely available across browsers, but production code should still be checked against its actual support targets.

The direct version also remains valid:

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

border-box does not prevent all overflow. Content can still have an intrinsic minimum size, a long unbreakable string can still overflow, and an item's margins can still push its margin box beyond a container. Treat box-sizing as one sizing rule, not an overflow switch.

Margin collapsing without the shortcut errors

In normal block layout, adjoining block-axis margins can collapse into one margin. In the common horizontal writing mode, these are the top and bottom margins. Inline-axis margins do not collapse.

.top    { margin-bottom: 30px; }
.bottom { margin-top: 20px; }
/* The gap is 30px, not 50px. */

"The larger margin wins" is correct only when the adjoining margins are positive. MDN's box-model guide gives the complete arithmetic:

• Among positive margins, use the largest.
• Among negative margins, use the one farthest from zero.
• When positive and negative margins adjoin, subtract the largest absolute negative value from the largest positive value.

Collapsing can occur between adjacent block siblings, between a parent and its first or last in-flow block child when nothing separates their margins, and through an empty block with no relevant border, padding, height, or in-flow content.

It does not occur between flex or grid items, and it does not cross a new formatting-context boundary. A parent can deliberately prevent child margins from escaping by using display: flow-root. MDN's block formatting context reference also notes that overflow values other than visible and clip create a block formatting context. Prefer flow-root when containment is the actual intent; changing overflow may introduce clipping or scrollbars.

Other deliberate spacing patterns also survive: put padding or a border between parent and child margins, use Flexbox or Grid with gap, or assign vertical rhythm in one direction instead of setting both adjoining margins.

Inline boxes use only part of the model

The model still describes inline boxes, but non-replaced inline elements such as <span> and ordinary <a> elements do not behave like block boxes:

• width, height, margin-top, and margin-bottom do not affect a non-replaced inline box in normal inline layout.
• Left and right padding, border, and margin move surrounding inline content.
• Top and bottom padding and border are painted, but do not move the surrounding lines; they can overlap content on adjacent lines.

That is the corrected version of the tempting but inaccurate statement that "vertical margin is applied visually." For non-replaced inline elements, top and bottom margins have no effect. MDN demonstrates these rules in its current box-model lesson.

Use display: inline-block when an element should remain in the inline flow but needs block-like width, height, padding, border, and margin behavior:

.button-link {
  display: inline-block;
  padding: 12px 20px;
}

Replaced inline elements such as images have their own sizing behavior, so do not generalize the non-replaced <span> rules to every inline-level box.

Background painting extends under the border

The element background is visible through the content and padding areas. By default, it is also painted underneath the border to the border edge; an opaque border simply covers that paint. Margin remains transparent.

That distinction matters with transparent or partly transparent borders. Use background-clip when the paint must stop at a different edge:

.card {
  border: 5px solid rgb(0 0 0 / 30%);
  background: white;
  background-clip: padding-box;
}

This corrects the common simplification that a background always "stops at the border." The CSS Box Model specification states that backgrounds are additionally painted underneath the border by default.

Debug the number the browser actually used

Chrome, Edge, and Firefox DevTools all expose a box-model diagram, though tab names and colors can change. Inspect the element and check these in order:

1. Read the computed box-sizing, width, min-width, and max-width.
2. Read padding and border on both relevant sides.
3. Check margin separately; it is outside the border-box calculation.
4. Confirm the element's outer and inner display behavior.
5. If spacing is vertical, check whether margins collapse or a formatting context prevents collapse.
6. If a percentage padding surprises you, calculate it from the containing block's logical width.

For visual debugging without changing layout, an outline is useful because it does not consume box-model space:

* {
  outline: 1px solid rgba(255, 0, 0, 0.3);
}

Remove the rule before shipping. If a box still appears wider than the arithmetic predicts, inspect intrinsic content, transforms, positioned descendants, and overflow rather than adding compensating negative margins.

The working checklist

• Read boxes from content to padding to border to margin.
• Use padding for interior space and margin for separation.
• Remember that backgrounds paint under the border by default; margins stay transparent.
• Choose border-box when declared dimensions should include padding and border.
• Keep margin outside every box-sizing calculation.
• Treat margin collapsing as a block-formatting-context rule, including its negative-margin arithmetic.
• Distinguish non-replaced inline boxes from block and replaced boxes.
• Use logical properties such as padding-inline when spacing should follow writing mode.
• Inspect computed values before changing the CSS.

The beginner's CSS guide supplies the wider cascade and layout context. Then use how to center a div to apply box sizing, auto margins, Flexbox, and Grid to a real layout problem.

An independent publication. Not affiliated with any prior owner of this domain.