Padding
Add padding to elements
Syntax
space="p:[value]" or space="p-{side}:[value]"Values
| Property | CSS Output | Description |
|---|---|---|
p | padding: var(--s-{value}) | All sides |
p-t | padding-top: var(--s-{value}) | Top |
p-r | padding-right: var(--s-{value}) | Right |
p-b | padding-bottom: var(--s-{value}) | Bottom |
p-l | padding-left: var(--s-{value}) | Left |
p-x | padding-left: var(--s-{value}) padding-right: var(--s-{value}) | Horizontal |
p-y | padding-top: var(--s-{value}) padding-bottom: var(--s-{value}) | Vertical |
Scale Values
none, tiny, small, medium, big, giant, vast
Examples
html
<div space="p:medium">Padding all sides</div>
<div space="p-x:big p-y:small">Different padding</div>
<div space="p:[20px]">Custom padding</div>Preview
Padding Scale
space="p:medium" - Different padding sizes from the scale
tiny
small
medium
big
View Code
html
<div layout="flex" space="g:small">
<div space="p:tiny" visual="bg:primary text:white rounded:small">tiny</div>
<div space="p:small" visual="bg:primary text:white rounded:small">small</div>
<div space="p:medium" visual="bg:primary text:white rounded:small">medium</div>
<div space="p:big" visual="bg:primary text:white rounded:small">big</div>
</div>Directional Padding
space="p-x:big" - Apply padding to specific sides
p-x:big p-y:small
p-t:big
View Code
html
<div layout="flex" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
<div space="p-x:big p-y:small" visual="bg:primary text:white rounded:small">p-x:big p-y:small</div>
<div space="p-t:big" visual="bg:primary text:white rounded:small">p-t:big</div>
</div>Arbitrary Values
Supports custom values using bracket syntax:
html
<div space="padding:[custom-value]">Custom</div>Notes
TIP
Tailwind Scale Support
Use tw- prefix to access Tailwind numeric scale: p:tw-4 (1rem), p:tw-8 (2rem)