Runnable CSS Docs: Padding

Q: What order are the values in the padding shorthand?

Clockwise from the top: padding: top right bottom left;. With three values it is top, left and right, bottom; with two values, top and bottom then left and right; with one value, all four sides.

Q: Does padding increase the size of an element?

With the default box-sizing: content-box, yes: padding is added to width and height. With box-sizing: border-box, padding is taken from inside the width, so the element keeps the size you set.

Q: What is a percentage padding relative to?

The width of the containing block, for all four sides. padding-top: 50% is half of the parent's width, not its height, which is why old aspect-ratio tricks used vertical padding.

Q: How do I add padding in HTML?

With CSS, in a stylesheet or a style attribute: . HTML has no padding attribute for general elements; the old cellpadding attribute on tables is obsolete and replaced by padding on td and th.

What padding is

Padding is the space inside an element, between its content and its border. It takes the element's background, so it is the property that gives a button, a card or a badge room to breathe.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Padding</title>
  <style>
    .box {
      padding: 24px;
      border: 3px solid #111827;
      /* blue over the content only, green over the padding */
      background: linear-gradient(#2563eb, #2563eb) content-box, #16a34a;
      color: white;
      width: max-content;
      margin-bottom: 12px;
    }
    .none { padding: 0; }
  </style>
</head>
<body>
  <div class="box none">padding: 0</div>
  <div class="box">padding: 24px (the green band)</div>
</body>
</html>

The blue area is the content. The green band around it is the 24px of padding on every side, and the border sits outside that.

The padding shorthand: 1, 2, 3 or 4 values

padding sets all four sides in one declaration. The number of values decides which side gets which, going clockwise from the top:

Declaration	Top	Right	Bottom	Left
`padding: 10px;`	10	10	10	10
`padding: 10px 20px;`	10	20	10	20
`padding: 10px 20px 30px;`	10	20	30	20
`padding: 10px 20px 30px 40px;`	10	20	30	40

Two values mean "vertical, horizontal". Three values mean "top, horizontal, bottom". Four go around the clock: top, right, bottom, left (a common memory aid is TRouBLe).

Type any shorthand below. The box redraws and the browser reports what each side got:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Padding tester</title>
  <style>
    #box {
      width: max-content;
      padding: 10px 20px 30px 40px;
      border: 3px solid #111827;
      background: linear-gradient(#2563eb, #2563eb) content-box, #16a34a;
      color: white;
      margin-top: 10px;
    }
    code { font-size: 14px; }
  </style>
</head>
<body>
  <label>padding: <input id="val" value="10px 20px 30px 40px" size="24"></label>
  <div id="box">content</div>
  <p><code id="out"></code></p>
  <script>
    const box = document.getElementById('box');
    const input = document.getElementById('val');
    const show = () => {
      box.style.padding = input.value;
      const s = getComputedStyle(box);
      document.getElementById('out').textContent =
        'top ' + s.paddingTop + ', right ' + s.paddingRight +
        ', bottom ' + s.paddingBottom + ', left ' + s.paddingLeft;
    };
    input.addEventListener('input', show);
    show();
  </script>
</body>
</html>

Try 8px, 8px 24px, 0 0 40px, and 1em 5%. An invalid value, such as -10px, is ignored and the box keeps the last valid padding.

One side at a time

Each side has its own property, which is clearer than a four-value shorthand when you only want to change one:

.card {
  padding-top: 16px;
  padding-right: 24px;
  padding-bottom: 16px;
  padding-left: 24px;
}

A shorthand followed by one side is a common pattern: set everything, then adjust one side.

.card {
  padding: 16px;
  padding-bottom: 32px; /* only the bottom changes */
}

The order matters here: a padding shorthand written after padding-bottom would reset the bottom back to 16px.

Logical padding: padding-inline and padding-block

padding-left and padding-right are physical: they stay on the same side in every language. The logical properties follow the writing direction instead, which is what you want on a site that is also shown right to left:

Logical property	In English (left to right)	In Arabic (right to left)
`padding-inline-start`	left	right
`padding-inline-end`	right	left
`padding-inline`	left and right	right and left
`padding-block`	top and bottom	top and bottom

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Logical padding</title>
  <style>
    .note {
      padding-block: 8px;
      padding-inline-start: 40px; /* space before the text */
      padding-inline-end: 12px;
      border-inline-start: 6px solid #2563eb;
      background: #e5e7eb;
      margin-bottom: 8px;
    }
  </style>
</head>
<body>
  <p class="note">The wide padding is at the start of the line.</p>
  <p class="note" dir="rtl">Right to left: the edge and the wide padding switch sides</p>
</body>
</html>

Padding makes the box bigger (unless border-box)

By default, width is the width of the content only, and padding is added on top of it. A width: 200px box with padding: 20px is 240px wide:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Padding and width</title>
  <style>
    .box {
      width: 200px;
      padding: 20px;
      background: #bfdbfe;
      margin-bottom: 10px;
    }
    .border-box { box-sizing: border-box; background: #bbf7d0; }
  </style>
</head>
<body>
  <div class="box">content-box</div>
  <div class="box border-box">border-box</div>
  <script>
    document.querySelectorAll('.box').forEach((el) => {
      el.textContent += ': ' + el.offsetWidth + 'px wide';
    });
  </script>
</body>
</html>

box-sizing: border-box keeps the box at 200px and takes the padding from inside. The box model page covers the full math.

Percentage padding

A percentage padding is measured against the width of the parent, on all four sides, including top and bottom:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Percent padding</title>
  <style>
    .parent { width: 300px; height: 100px; background: #e5e7eb; }
    .child {
      padding-top: 10%; /* 10% of 300px = 30px, not 10% of 100px */
      background: #f59e0b;
    }
  </style>
</head>
<body>
  <div class="parent"><div class="child" id="c"></div></div>
  <p id="out"></p>
  <script>
    document.getElementById('out').textContent =
      'padding-top: ' + getComputedStyle(document.getElementById('c')).paddingTop;
  </script>
</body>
</html>

That is where the old "padding-top: 56.25%" trick for 16:9 video boxes came from. Today aspect-ratio: 16 / 9 does the same job directly.

Padding on buttons and links

Padding is the right way to make a link or button bigger, because padding is part of the element and therefore part of what you can click or tap. Margin would add space but not a bigger target.

.btn {
  display: inline-block; /* lets vertical padding take space in the line */
  padding: 10px 18px;    /* a comfortable touch target */
}

Values padding accepts

Value	Example	Notes
Length	`12px`, `1rem`, `0.5em`	`em` scales with the element's font size
Percentage	`5%`	Of the containing block's width
`0`	`padding: 0`	No unit needed
Negative	`-10px`	Invalid, ignored
`auto`	`auto`	Invalid for padding (it works for margin)

Common mistakes

Wrong order in the four-value shorthand. It is top, right, bottom, left, clockwise.
A box that grows when you add padding. Set box-sizing: border-box.
Using padding to separate two elements. Space between elements is margin; padding is space inside one. See margin vs padding.
Vertical padding on an inline link that overlaps other lines. Make it inline-block.
Negative padding or padding: auto. Both are invalid and silently ignored.

Frequently Asked Questions

What is padding in CSS?

Padding is the space between an element's content and its border. It is part of the element, so it shows the element's background color and makes the clickable area of a link or button bigger.

What order are the values in the padding shorthand?

Clockwise from the top: padding: top right bottom left;. With three values it is top, left and right, bottom; with two values, top and bottom then left and right; with one value, all four sides.

Does padding increase the size of an element?

With the default box-sizing: content-box, yes: padding is added to width and height. With box-sizing: border-box, padding is taken from inside the width, so the element keeps the size you set.

What is a percentage padding relative to?

The width of the containing block, for all four sides. padding-top: 50% is half of the parent's width, not its height, which is why old aspect-ratio tricks used vertical padding.

Can padding be negative?

No. A negative padding value is invalid and the declaration is ignored. To pull content outward, use a negative margin instead.

How do I add padding in HTML?

With CSS, in a stylesheet or a style attribute: <div style="padding: 16px;">. HTML has no padding attribute for general elements; the old cellpadding attribute on tables is obsolete and replaced by padding on td and th.

Related concepts