padding

padding is a shorthand for the space between content and border on all four physical sides. The element’s background normally paints through that area.

See the inside space

The blue area includes padding. The dashed border marks the outside edge of that padded box.

<div class="box">16px above/below; 24px on each side.</div>

.box {
  padding: 16px 24px;
  background: #dbeafe;
  border: 2px dashed #2563eb;
}

A comfortable native control

Padding increases the control’s rendered area. Border-box includes it in this full-width button’s size; a minimum height helps preserve the touch target.

<button
  type="button"
  onclick="this.textContent='Saved locally in this example'"
>
  Save this example
</button>

button {
  width: 100%;
  max-width: 18rem;
  box-sizing: border-box;
  padding: 0.75rem 1rem;
  min-height: 44px;
  border: 1px solid #1d4ed8;
  background: #eff6ff;
  color: #172554;
}
button:focus-visible {
  outline: 3px solid #2563eb;
  outline-offset: 3px;
}

Values and resets

The four padding longhands initially use 0 and are not inherited. One value sets all sides; two set top/bottom then left/right; three set top, left/right, bottom; four run clockwise from top. The shorthand resets every side.

Lengths and percentages are allowed; negative values and auto are invalid. Percentages use the containing block’s inline size, including vertical padding, not the element’s own height or width. Padding does not collapse like block margins.

Sizing and applicability

With content-box, padding adds to declared width and height. With border-box, it is included, subject to nonnegative content size. Padding applies to most boxes, but not table row/column groups or rows/columns; style actual table cells when appropriate.

Use logical padding-inline and padding-block for writing-mode-aware spacing. Choose margin for outside space and gap for spacing between layout items.

Sources and browser support

MDN: padding describes the syntax and links to the specification and compatibility data. Check individual values in that table when supporting older browsers.