padding
Create internal spacing using physical or logical sides.
Quick answer
Use p-md for padding on every side. Its value comes from the active spacing namespace. This borderless button has a 32px-wide, 20px-high content span; the default 16px padding makes its border box 64 × 52px.
<div id="layout" class="w:17.5rem max-w:100%" role="group" aria-label="Available space"> <button id="target" class="p-md border-width:0" type="button"><span id="item-3" class="block w:2rem leading:20px">Save</span></button></div>@layer theme { :root, :host { --spacing-md: 1rem }}@layer utilities { .p-md { padding: var(--spacing-md) }}Overview
All sides
| Class | Declarations |
|---|---|
p:<size> | padding: <size>;
|
p:<vertical>|<horizontal> | padding: <vertical> <horizontal>;
|
p:<top>|<horizontal>|<bottom> | padding: <top> <horizontal> <bottom>;
|
p:<top>|<right>|<bottom>|<left> | padding: <top> <right> <bottom> <left>;
|
Logical sides
| Class | Declarations |
|---|---|
px:<size> | padding-inline: <size>;
|
px:<inline-start>|<inline-end> | padding-inline: <inline-start> <inline-end>;
|
py:<size> | padding-block: <size>;
|
py:<block-start>|<block-end> | padding-block: <block-start> <block-end>;
|
pxs:<size> | padding-inline-start: <size>;
|
pxe:<size> | padding-inline-end: <size>;
|
pys:<size> | padding-block-start: <size>;
|
pye:<size> | padding-block-end: <size>;
|
Physical sides
| Class | Declarations |
|---|---|
pt:<size> | padding-top: <size>;
|
pr:<size> | padding-right: <size>;
|
pb:<size> | padding-bottom: <size>;
|
pl:<size> | padding-left: <size>;
|
Values and tokens
Current preset examples:
--spacing-sm:.75rem--spacing-md:1rem--spacing-lg:1.5rem
Project theme declarations can override these values. See the complete spacing namespace.
px and py refer to inline and block directions. Their physical direction depends on writing mode; they are not always horizontal and vertical.
Examples
Combine values and logical sides
Separate shorthand values with |: two values mean top/bottom, then left/right. Logical pxs:* means inline-start. The same start padding moves from left to right when text direction becomes RTL.
<!-- Two physical values --><div id="layout" class="w:17.5rem max-w:100%" role="group" aria-label="Available space"> <div id="target" class="w:fit-content p:var(--spacing-md)|var(--spacing-lg)"><div id="item-3" class="grid place-items:center h:3rem w:7.5rem">Content</div></div></div><!-- Inline start · LTR --><div id="layout" class="w:17.5rem max-w:100%" role="group" aria-label="Available space"> <div id="target" class="w:fit-content pxs-md"><div id="item-3" class="grid place-items:center h:3rem w:7.5rem">Content</div></div></div><!-- Inline start · RTL --><div id="layout" class="w:17.5rem max-w:100%" role="group" aria-label="Available space"> <div id="target" class="w:fit-content pxs-md direction:rtl"><div id="item-3" class="grid place-items:center h:3rem w:7.5rem">Content</div></div></div>Logical sides follow both writing mode and direction. Physical four-side shorthand keeps its top/right/bottom/left interpretation.
Add padding on every side
p-md adds 16px between content and each edge of the box. The neutral content is 160 × 48px, so the blue box is 192 × 80px with no border. Its background also paints the padded area.
<div id="layout" class="w:17.5rem max-w:100%" role="group" aria-label="Available space"> <div id="target" class="w:fit-content p-md"><div id="item-3" class="grid place-items:center h:3rem w:10rem">Content</div></div></div>With border-box sizing and an explicit width, padding uses space inside that width. Here the width is intrinsic, so the content and padding determine the final size together.
Set one side
Use pt:*, pr:*, pb:* and pl:* for physical sides. This box uses 24px top, 16px right, 32px bottom and 12px left padding around 120 × 48px content. The result is 148 × 104px.
<div id="layout" class="w:17.5rem max-w:100%" role="group" aria-label="Available space"> <div id="target" class="w:fit-content pb-xl pl-sm pr-md pt-lg"><div id="item-3" class="grid place-items:center h:3rem w:7.5rem">Content</div></div></div>Physical sides stay physical in every writing mode. Prefer logical properties when the intended edge should follow the reader’s direction.
Set inline or block padding
px:* sets inline padding and py:* sets block padding. With px-md py-sm, horizontal writing gets 16px left/right and 12px top/bottom. Vertical writing swaps those physical directions while preserving the same logical values.
<!-- Horizontal writing --><div id="layout" class="w:17.5rem max-w:100%" role="group" aria-label="Available space"> <div id="target" class="w:fit-content px-md py-sm"><div id="item-3" class="grid place-items:center h:3rem w:7.5rem">Content</div></div></div><!-- Vertical writing --><div id="layout" class="w:17.5rem max-w:100%" role="group" aria-label="Available space"> <div id="target" class="w:fit-content px-md py-sm writing-mode:vertical-rl"><div id="item-3" class="grid place-items:center h:3rem w:7.5rem">Content</div></div></div>Use p:0 to remove padding at a breakpoint or state. The next example keeps the content fixed so this reset can be measured directly.
Apply conditionally
Resize past sm to apply p:0. The same 160 × 48px content remains; removing the 16px padding changes the border box from 192 × 80px to 160 × 48px.
<div id="layout" class="w:17.5rem max-w:100%" role="group" aria-label="Available space"> <div id="target" class="w:fit-content p-md p:0@sm"><div id="item-3" class="grid place-items:center h:3rem w:10rem">Content</div></div></div>Use shared spacing tokens for repeated rhythm. Raw values are appropriate for a measured local detail, such as the fixed content dimensions used in this specimen.