Padding

Overview

Padding utilities apply the CSS padding property and its logical shorthand variants. All classes are responsive by default and cover all four sides at once, an axis (inline or block), or a single edge.

Notation

Padding classes that apply at all breakpoints have no breakpoint prefix — they start from min-width: 0 and are not media-query-bound. Breakpoint-prefixed classes apply at that breakpoint and above.

The classes are named using the format p{sides}-{size} for xsmall and {breakpoint}:p{sides}-{size} for small, medium, large, xlarge, and 2xlarge.

Where sides is one of:

• x — padding-inline (both inline edges)
• y — padding-block (both block edges)
• t — padding-block-start
• b — padding-block-end
• s — padding-inline-start
• e — padding-inline-end
• (blank) — padding on all four sides

Where size is one of:

• zero or 0 — eliminates padding by setting it to 0
• 4xsmall — default token value is 0.0625rem (1px).
• 3xsmall — default token value is 0.125rem (2px).
• 2xsmall — default token value is 0.25rem (4px).
• xsmall — default token value is 0.5rem (8px).
• medium — default token value is 1rem (16px).
• large — default token value is 1.25rem (20px).
• xlarge — default token value is 1.5rem (24px).
• 2xlarge — default token value is 1.75rem (28px).
• 3xlarge — default token value is 2rem (32px).
• 4xlarge — default token value is 2.25rem (36px).
• 5xlarge — default token value is 2.5rem (40px).
• 6xlarge — default token value is 3rem (48px).

Additional sizes can be added by adding entries to the $spaces Sass map.

All sides

.p-{size} sets padding on all four sides of an element at once.

<div class="p-xsmall">p-xsmall</div>
<div class="p-small">p-small</div>
<div class="p-medium">p-medium</div>
<div class="p-large">p-large</div>

Axes

Axis utilities apply padding to two opposite edges simultaneously. .px-{size} targets both inline edges; .py-{size} targets both block edges.

<div class="px-large py-xsmall">px-large, py-xsmall</div>
<div class="px-xsmall py-large">px-xsmall, py-large</div>

Individual edges

Single-edge utilities set padding on one edge without affecting the others.

<div class="pt-large">pt-large</div>
<div class="pb-large">pb-large</div>
<div class="ps-large">ps-large</div>
<div class="pe-large text-end">pe-large</div>

Responsive padding

Prefix any padding class with a breakpoint to apply it at that breakpoint and above. Unprefixed classes apply from xsmall up.

<div class="p-xsmall medium:p-large">p-xsmall, then p-large from medium up</div>

CSS

Padding utilities are generated via the utilities API in scss/utilities/_padding.scss.

Reference

The table lists all padding utilities and their CSS properties.

Sass maps

Padding utilities are generated from Sass maps in scss/maps/_spacing.scss.

$spaces: (
  zero:           $space-zero,
  4xsmall:        $space-4xsmall,
  3xsmall:        $space-3xsmall,
  2xsmall:        $space-2xsmall,
  xsmall:         $space-xsmall,
  small:          $space-small,
  medium:         $space-medium,
  large:          $space-large,
  xlarge:         $space-xlarge,
  2xlarge:        $space-2xlarge,
  3xlarge:        $space-3xlarge,
  4xlarge:        $space-4xlarge,
  5xlarge:        $space-5xlarge,
  6xlarge:        $space-6xlarge,
);

$-padding-values is derived from $spaces in scss/utilities/_padding.scss, resolving each spacing key to its :root custom property via var(--space-*), plus 0.

// Build a padding values map from $spaces. Each key maps to its :root spacing variable, plus 0.
$-padding-values: map.merge(map-loop($spaces, varify, "$key", "space"), (0: 0));

Utilities API

Padding utilities are declared in scss/utilities/_padding.scss using the utilities API.

"padding": (
  responsive: true,
  property: padding,
  class: p,
  values: $-padding-values
),
"padding-x": (
  responsive: true,
  property: padding-inline,
  class: px,
  values: $-padding-values
),
"padding-y": (
  responsive: true,
  property: padding-block,
  class: py,
  values: $-padding-values
),
"padding-top": (
  responsive: true,
  property: padding-block-start,
  class: pt,
  values: $-padding-values
),
"padding-end": (
  responsive: true,
  property: padding-inline-end,
  class: pe,
  values: $-padding-values
),
"padding-bottom": (
  responsive: true,
  property: padding-block-end,
  class: pb,
  values: $-padding-values
),
"padding-start": (
  responsive: true,
  property: padding-inline-start,
  class: ps,
  values: $-padding-values
),