CSS / Padding and margin: spacing, width calculations and collapsing margins

In CSS, padding is the space between the content and border, while margin is outside the border. Use padding to expand the inside of an element, including its background, and margin to adjust its separation from surrounding elements. The resulting width depends on box-sizing, and eligible vertical margins can collapse instead of simply adding together.

How padding and margin differ

An element’s box consists of content, padding, border and margin, in that order from inside to outside. Its background normally extends through the padding, while the margin is transparent. Increasing a button’s padding usually expands its background and clickable box; adding margin does not make that outside gap clickable.

Both properties accept values such as px, rem and %, but padding: auto and negative padding are invalid. For the physical spacing properties of an ordinary horizontal writing mode, percentage values refer to the containing block’s width, including top and bottom values. They are not a percentage of its height. W3C box model and spacing definitions

Read shorthand values in the correct direction

A four-value shorthand starts at the top and proceeds clockwise: right, bottom, left. Two values mean vertical and horizontal; three mean top, horizontal, bottom. The same rule applies to padding and margin.

For one side, use a property such as padding-top or margin-left. A later padding or margin shorthand can overwrite previously declared side values, so check the order of the rules.

Check actual widths with a complete example

Save the complete code below as spacing.html in UTF-8 and open it in a browser. No library or server is needed. Alpha, Beta and the other words are comparison labels. After editing, save and reload. Select each .box in developer tools and inspect its box-model diagram or computed styles to check widths and spacing.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Compare padding and margin</title>
  <style>
    body { font-family: sans-serif; max-width: 640px; margin: 0 auto; padding: 16px; }
    h2 { font-size: 1.1rem; }
    .stage { padding: 12px; border: 1px dashed #777; overflow-x: auto; }
    .box { width: 200px; padding: 16px; border: 4px solid #17324d; margin: 24px; background: #dcefff; }
    .content-box { box-sizing: content-box; }
    .border-box { box-sizing: border-box; }
    .asymmetric { box-sizing: border-box; padding: 8px 16px 24px 32px; margin: 10px 20px 30px 40px; }
    .center { box-sizing: border-box; margin: 0 auto; }
    .collapse-demo { display: flow-root; border: 1px dashed #777; }
    .item { height: 30px; background: #dcefff; }
    .first { margin: 0 0 24px; }
    .second { margin: 16px 0 0; }
  </style>
</head>
<body>
  <h1>Compare padding and margin</h1>
  <h2>content-box</h2>
  <div class="stage"><div class="box content-box">Alpha</div></div>
  <h2>border-box</h2>
  <div class="stage"><div class="box border-box">Beta</div></div>
  <h2>padding / margin</h2>
  <div class="stage"><div class="box asymmetric">Gamma</div></div>
  <h2>margin: 0 auto</h2>
  <div class="stage"><div class="box center">Delta</div></div>
  <h2>margin-bottom / margin-top</h2>
  <div class="collapse-demo">
    <div class="item first">A</div>
    <div class="item second">B</div>
  </div>
</body>
</html>

Alpha has a border-box width of 200 + 16 × 2 + 4 × 2 = 240px. Including its horizontal margins, it occupies 240 + 24 × 2 = 288px. Beta uses border-box sizing, so its border-box width is 200px and its content width is 200 - 16 × 2 - 4 × 2 = 160px. These calculations exclude the surrounding stage element’s padding and border.

Gamma has 8px padding at the top, 16px on the right, 24px at the bottom and 32px on the left. Its margins are 10px, 20px, 30px and 40px in the same order. Compare the visible differences with the shorthand directions above.

Choose the sizing rule with box-sizing

With content-box, width specifies the content width, with padding and border added outside it. With border-box, the specified width includes content, padding and border. Neither sizing mode includes margin in width. Ordinary div elements initially use content-box, but a site’s reset CSS may change this; inspect the computed value.

Replace the example’s .content-box rule with the following. Alpha’s border-box width changes from 240px to 200px. Keep the other values unchanged, compare, and restore content-box. If padding and border together exceed the specified width, the content width cannot become negative, so the resulting box can still be wider than expected.

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

MDN explanation of box-sizing

Center a block with auto margins

To horizontally center a block in normal flow, the box must be narrower than the available width in its parent and its left and right margins must be auto. Delta has width 200px and margin: 0 auto, so the remaining horizontal space is shared between both sides. Centering alone cannot solve overflow when the parent is too narrow.

If an ordinary block with auto width already fills the available horizontal space, adding auto side margins produces no visible centering effect. In normal flow, margin-top: auto and margin-bottom: auto do not vertically center it. Auto margins in Flexbox or Grid follow different layout rules, so distinguish those contexts.

Understand collapsing and negative margins

Eligible adjoining vertical margins can collapse in ordinary block layout. In the last example, A’s 24px bottom margin and B’s 16px top margin are both positive, so their gap is the larger value, 24px, rather than 40px. The parent’s border prevents margin collapse between that parent and its children in this example.

Change the example’s .collapse-demo rule as below. Its children become flex items, whose margins do not collapse with each other, so the gap becomes 24 + 16 = 40px. Compare and restore display: flow-root. Applying flow-root to a parent alone does not eliminate all margin collapse between sibling blocks.

.collapse-demo {
  display: flex;
  flex-direction: column;
  border: 1px dashed #777;
}

In the horizontal writing mode used here, left and right margins do not collapse this way. When collapsing margins include positive and negative values, add the largest positive value to the negative value with the greatest absolute magnitude: 24px and -8px produce 16px. If all are negative, use the most negative value; -8px and -16px produce -16px. A declaration such as margin-left: -8px is valid but can cause overlap or move content outside its parent. Check narrow screens and keyboard focus indicators. Negative padding cannot produce the same effect. W3C margin-collapsing rules

Troubleshoot unexpected spacing

1. Check browser defaults. The default body margin or the default vertical margins of p and h1 can make spacing appear larger than your declarations. Reset the relevant elements rather than blindly removing all spacing.
2. For an ordinary non-replaced inline element such as span, vertical margins do not affect line layout. Inline padding can be painted without pushing adjacent lines apart as expected. Consider inline-block or another layout mode when the box needs independent sizing and spacing.
3. Use developer tools to check that the selector matches, the declaration is valid, and a higher-priority rule or later shorthand has not overridden it. Compare at a narrow width too, checking overflow and the effect of padding on width.

To define spacing relative to writing direction, use logical properties such as padding-inline and margin-block. In ordinary horizontal writing, the inline axis is horizontal and the block axis is vertical. These axes change in vertical writing, so they do not always correspond to physical left and right.