Padding

Utilities for controlling an element’s padding (space inside an element).

Quick reference

Scale: 0 · xs · sm · md · lg · xl · 2xl · 3xl · 4xl (maps to --af-space-0…8).

Class	Styles
af-p-*	padding: var(--af-space-*)
af-px-*	padding-inline: var(--af-space-*)
af-py-*	padding-block: var(--af-space-*)
af-pt-*	padding-top: var(--af-space-*)
af-pr-*	padding-right: var(--af-space-*)
af-pb-*	padding-bottom: var(--af-space-*)
af-pl-*	padding-left: var(--af-space-*)

Examples

Basic padding

Use af-p-* utilities like af-p-sm and af-p-lg to control padding on all sides:

Basic padding

Padded content

<div class="af-p-lg">
  <div class="af-border af-radius-sm af-bg-primary-soft af-p-sm">
    Padded content
  </div>
</div>

Directional padding

Use axis and side utilities (af-px-*, af-py-*, af-pt-*, …) for finer control:

Directional padding

px + py

pt + pr + pb + pl

<div class="af-px-lg af-py-sm">
  px + py
</div>
<div class="af-pt-lg af-pr-md af-pb-sm af-pl-md">
  pt + pr + pb + pl
</div>

Responsive design

Prefix a padding utility with a breakpoint suffix to apply it from that breakpoint and up:

<div class="af-p-sm af-p-lg@md">
  <!-- ... -->
</div>

See Responsive Suffix for syntax and breakpoints.

Customizing your theme

Padding utilities are driven by the --af-space-* tokens. Override them in CSS — no rebuild required:

:root {
  --af-space-sm: 0.5rem;
  --af-space-md: 1rem;
  --af-space-lg: 1.5rem;
}

See Theming and Tokens for the full spacing scale.

Related

• Margin