padding

Definition

The padding CSS property sets the inner spacing of an element, creating space between the element’s content and its border. Padding is part of the CSS box model and affects the visual appearance and layout of elements. Unlike margins, padding is included within the element’s total width and height calculations.

Syntax

.card {
  padding: 1.5rem 2rem;
}

Values

<length>: fixed inner spacing.
<percentage>: resolves against the width of the element (for block-direction as well).
Specify 1–4 values to target sides (top, right, bottom, left).

Practical Examples

.card {
  padding: 1.5rem;
  border-radius: 1rem;
  background: linear-gradient(135deg, #0ea5e9, #6366f1);
  color: white;
}

Padding creates breathing room inside components, separating content from borders or backgrounds.

HTML

padding: 0

padding: 0.75rem 1.5rem

Code

<div class="grid gap-4 sm:grid-cols-2">
  <div class="rounded-xl border border-slate-200 bg-white p-4 shadow-sm">
    <p class="text-xs font-semibold uppercase tracking-wide text-slate-500">padding: 0</p>
    <button class="w-full rounded-lg bg-sky-500 py-2 text-sm font-semibold text-white">Tight CTA</button>
  </div>
  <div class="rounded-xl border border-slate-200 bg-white p-4 shadow-sm">
    <p class="text-xs font-semibold uppercase tracking-wide text-slate-500">padding: 0.75rem 1.5rem</p>
    <button class="w-full rounded-lg bg-sky-500 text-sm font-semibold text-white" style="padding: 0.75rem 1.5rem;">Comfortable CTA</button>
  </div>
</div>

Tips & Best Practices

Combine padding with box-sizing: border-box to keep component widths predictable.
Use CSS variables like --space to ensure consistent spacing scale across a design system.
Logical properties (padding-inline, padding-block) respect writing modes.

Accessibility & UX Notes

Adequate padding increases tap target sizes, aiding touch and motor-impaired users.

Browser Support

Padding shorthand is fully supported in browsers old and new.

margin for outer spacing.
gap within layout containers.
border and box-shadow which visually interact with padding.