# Spacing Utility Classes
Kickstand UI's spacing utility classes are designed to make positioning and alignment of components and content quick and easy.
The pattern for the utility classes is fairly intuitive:
pfor "padding" ormfor "margin"- if you wish to add a margin on only part of the container you can specify a direction - top (
t), right (r), bottom (b), left (l), top and bottom (y), or left and right (x) - finally, add the size of the spacing you would like (
auto,none, andxxxs-xxxl)
# Padding
xxxs
p-xxxs
pt-xxxs
pr-xxxs
pb-xxxs
pl-xxxs
px-xxxs
py-xxxs
xxs
p-xxs
pt-xxs
pr-xxs
pb-xxs
pl-xxs
px-xxs
py-xxs
xs
p-xs
pt-xs
pr-xs
pb-xs
pl-xs
px-xs
py-xs
sm
p-sm
pt-sm
pr-sm
pb-sm
pl-sm
px-sm
py-sm
md
p-md
pt-md
pr-md
pb-md
pl-md
px-md
py-md
lg
p-lg
pt-lg
pr-lg
pb-lg
pl-lg
px-lg
py-lg
xl
p-xl
pt-xl
pr-xl
pb-xl
pl-xl
px-xl
py-xl
xxl
p-xxl
pt-xxl
pr-xxl
pb-xxl
pl-xxl
px-xxl
py-xxl
xxxl
p-xxxl
pt-xxxl
pr-xxxl
pb-xxxl
pl-xxxl
px-xxxl
py-xxxl
# Margin
xxxs
m-xxxs
mt-xxxs
mr-xxxs
mb-xxxs
ml-xxxs
mx-xxxs
my-xxxs
xxs
m-xxs
mt-xxs
mr-xxs
mb-xxs
ml-xxs
mx-xxs
my-xxs
xs
m-xs
mt-xs
mr-xs
mb-xs
ml-xs
mx-xs
my-xs
sm
m-sm
mt-sm
mr-sm
mb-sm
ml-sm
mx-sm
my-sm
md
m-md
mt-md
mr-md
mb-md
ml-md
mx-md
my-md
lg
m-lg
mt-lg
mr-lg
mb-lg
ml-lg
mx-lg
my-lg
xl
m-xl
mt-xl
mr-xl
mb-xl
ml-xl
mx-xl
my-xl
xxl
m-xxl
mt-xxl
mr-xxl
mb-xxl
ml-xxl
mx-xxl
my-xxl
xxxl
m-xxxl
mt-xxxl
mr-xxxl
mb-xxxl
ml-xxxl
mx-xxxl
my-xxxl
# Negative Margins
You can also create negative margins by prefacing the class with a dash (-).
-ml-xxl
<span class="p-xxl bg-info"></span>
<span class="p-lg -ml-xxl bg-light-light">-ml-xxl</span>
# Responsive Classes
You can also change the layout based on the user's screen size using the responsive variations of each class. By prefixing the class with the desired screen size (xxs-xl), you can adjust the behavior.
I have a "md" padding normally, but an "xl" padding on medium screens
<div class="p-md md:p-xl bg-info-lighter">
<div class="bg-light">I have a "md" padding normally, but an "xl" padding on medium screens</div>
</div>