padding

Setting the padding area on all four sides of an element.

Overview

Examples

Add padding on every side

Use p:* to create space inside an element on all four sides. Padding is part of the element box, so backgrounds and borders include the padded area.

<section class="p:md bg:white b:1px|solid|gray-20">    Content with breathing room.</section>

@layer theme {    :root {        --spacing-md: 1rem    }}@layer utilities {    .p\:md {        padding: var(--spacing-md)    }}

Set one side

Use pt:*, pr:*, pb:*, and pl:* when only one physical side needs spacing.

<article class="pt:lg pr:md pb:xl pl:md">    ...</article>

Physical sides are useful for fixed component anatomy. For bidirectional layouts, check whether the design needs logical CSS properties before relying on left and right.

Set horizontal or vertical padding

Use px:* for inline padding and py:* for block padding. This is the common pattern for buttons, cards, fields, and page gutters.

<button class="px:md py:sm r:md">    Save changes</button>

Use p:0 to remove inherited or component-level padding at a breakpoint or state.

<section class="p:md p:0@sm px:lg@sm">    ...</section>

Apply conditionally

Apply styles based on different states using selectors and conditional queries.

<div class="p:sm:hover p:md@sm p:lg@dark p:0@print">...</div>

Use spacing tokens for repeated component rhythm. Use raw values only when the padding is a measured local detail.