Spacing Utilities
Utilities for controlling padding, margin, and space between elements using the 4px baseline scale.
Padding
| Class | Properties |
|---|---|
p-0 | padding: 0px; |
p-1 | padding: 0.25rem; /* 4px */ |
p-2 | padding: 0.5rem; /* 8px */ |
p-3 | padding: 0.75rem; /* 12px */ |
p-4 | padding: 1rem; /* 16px */ |
p-6 | padding: 1.5rem; /* 24px */ |
p-8 | padding: 2rem; /* 32px */ |
p-12 | padding: 3rem; /* 48px */ |
Directional Padding
px-4— horizontal padding (left&right)py-2— vertical padding (top&bottom)pt-4,pr-4,pb-4,pl-4— individual sides
Margin
| Class | Properties |
|---|---|
m-0 | margin: 0px; |
m-auto | margin: auto; |
mx-auto | margin-left: auto; margin-right: auto; |
m-2 | margin: 0.5rem; |
m-4 | margin: 1rem; |
m-8 | margin: 2rem; |
Negative Margins
Prefix any margin utility with a dash to apply negative spacing:
-m-2(margin: -0.5rem;)-mt-4(margin-top: -1rem;)-mx-6(margin-left: -1.5rem; margin-right: -1.5rem;)
Arbitrary Values
NUICSS supports any arbitrary spacing value using square bracket notation:
html
<div class="p-[18px] m-[5vw]">Custom Spacing</div>