內邊距padding
Setting the padding area on all four sides of an element.
Overview
| 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>;
|
pt:<size> | padding-top: <size>;
|
pr:<size> | padding-right: <size>;
|
pb:<size> | padding-bottom: <size>;
|
pl:<size> | padding-left: <size>;
|
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>;
|
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>Generated CSS
@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.