Runnable CSS Docs: Margin vs Padding

Q: Does padding or margin increase the element's size?

Padding does, under the default box-sizing: content-box: it is added to the width and height. Margin is never added to the element's size; it adds space around it (a block with width: auto even gets narrower, because its margins take part of the available width). With box-sizing: border-box, padding is taken from inside the width instead.

The difference in one picture

Padding is inside the border. Margin is outside it. Both boxes below have the same content and the same 24px value; only the property differs. The gray is the container behind them.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Margin vs padding</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .row { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
    .container { display: flow-root; background: #e5e7eb; width: max-content; }
    .box {
      border: 3px solid #111827;
      background: #2563eb;
      color: white;
    }
    .with-padding { padding: 24px; }
    .with-margin { margin: 24px; }
    .label { font-size: 13px; margin: 6px 0 0; color: #111827; }
  </style>
</head>
<body>
  <div class="row">
    <div>
      <div class="container"><div class="box with-padding">Text</div></div>
      <p class="label">padding: 24px</p>
    </div>
    <div>
      <div class="container"><div class="box with-margin">Text</div></div>
      <p class="label">margin: 24px</p>
    </div>
  </div>
</body>
</html>

With padding, the 24px is blue: it is part of the box, inside the border, and the box grows. With margin, the 24px is gray: the box stays tight around its text and the space outside pushes the container's edges away.

Try both on one box

Move the two sliders. Padding grows the blue box; margin moves the box away from the gray edges without changing it.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Sliders</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    label { display: block; margin-bottom: 6px; }
    .container { display: flow-root; background: #e5e7eb; width: max-content; margin-top: 10px; }
    #box { border: 3px solid #111827; background: #2563eb; color: white; }
  </style>
</head>
<body>
  <label>padding <input id="p" type="range" min="0" max="40" value="10"> <span id="pv"></span></label>
  <label>margin <input id="m" type="range" min="0" max="40" value="10"> <span id="mv"></span></label>
  <div class="container"><div id="box">Box</div></div>
  <p id="size"></p>
  <script>
    const box = document.getElementById('box');
    const p = document.getElementById('p');
    const m = document.getElementById('m');
    const update = () => {
      box.style.padding = p.value + 'px';
      box.style.margin = m.value + 'px';
      document.getElementById('pv').textContent = p.value + 'px';
      document.getElementById('mv').textContent = m.value + 'px';
      const r = box.getBoundingClientRect();
      document.getElementById('size').textContent =
        'Blue box: ' + Math.round(r.width) + ' x ' + Math.round(r.height) + 'px';
    };
    p.addEventListener('input', update);
    m.addEventListener('input', update);
    update();
  </script>
</body>
</html>

Watch the size line: it changes when you move the padding slider and stays the same when you move the margin slider.

Margin vs padding at a glance

	Padding	Margin
Where	Inside the border	Outside the border
Background	Shows the element's background	Always transparent
Part of the click area	Yes	No
Adds to the element's size	Yes, under `content-box`	No
Can be `auto`	No	Yes (`margin: 0 auto` centers)
Can be negative	No	Yes
Vertical values collapse	Never	Yes, adjacent vertical margins collapse
Percentages relative to	Containing block's width	Containing block's width
Typical use	Space inside buttons, cards, inputs	Space between elements, centering

Each property has its own page with every detail: CSS padding and CSS margin.

Which one to use

Ask one question: does the space belong to the element, or sit between elements?

Room around a button's label, the inside of a card, space between an input's text and its border: padding. It takes the background and makes the target bigger.
Space between two paragraphs, between cards, around a section: margin, or gap when the parent is a flex or grid container.

The click area is where the choice matters most. The two links below take up the same room on the page, but the first one's space is padding and the second one's is margin. Only the first is easy to hit:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Click area</title>
  <style>
    a {
      display: inline-block;
      background: #2563eb;
      color: white;
      text-decoration: none;
      outline: 2px dashed #f59e0b; /* the clickable area */
    }
    .pad { padding: 14px 24px; }
    .mar { margin: 14px 24px; }
  </style>
</head>
<body>
  <a class="pad" href="#">Padding: big target</a>
  <a class="mar" href="#">Margin: tiny target</a>
</body>
</html>

The dashed amber outline is the element's edge, which is the area that responds to clicks and taps. The margin around the second link is empty space that does nothing.

Spacing between items: margin or gap

For a row or grid of items, gap on the flex or grid parent is usually cleaner than margins on each child: it only goes between items, never before the first or after the last, so there is nothing to undo.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>gap</title>
  <style>
    .list { display: flex; gap: 12px; background: #e5e7eb; padding: 12px; }
    .item { background: #16a34a; color: white; padding: 12px 16px; }
  </style>
</head>
<body>
  <div class="list">
    <div class="item">One</div>
    <div class="item">Two</div>
    <div class="item">Three</div>
  </div>
</body>
</html>

Here the gray container uses padding (space inside it, gray), the items use padding (space inside each, green), and gap handles the space between them.

Common mistakes

Using margin for space that should be colored. Margin is transparent. If the space should show the background, it is padding.
Using margin to make a link bigger. The click area ends at the border; use padding.
Expecting two 20px vertical margins to make 40px. Adjacent vertical margins collapse to 20px. Padding never collapses.
Trying padding: auto to center. Only margin accepts auto.
Forgetting that padding grows the box. Add box-sizing: border-box so width includes it.

Frequently Asked Questions

What is the difference between margin and padding?

Padding is the space between an element's content and its border, inside the element. Margin is the space outside the border, between the element and its neighbors. Padding shows the element's background; margin is always transparent.

When should I use padding instead of margin?

Use padding for space that belongs to the element: room around a button's text, the inside of a card, anything that should share the background or be clickable. Use margin (or gap in flex and grid) for space between separate elements.

Does padding or margin increase the element's size?

Padding does, under the default box-sizing: content-box: it is added to the width and height. Margin is never added to the element's size; it adds space around it (a block with width: auto even gets narrower, because its margins take part of the available width). With box-sizing: border-box, padding is taken from inside the width instead.

Can padding be negative like margin?

No. Negative padding is invalid and ignored, while negative margins are allowed and can make elements overlap. Padding also cannot be auto, which is why centering uses margin: 0 auto.

Related concepts