#Padding
These are utility classes used to add padding for any element.
#Sizes
These are the different sizes supported for padding. Note that all calculations are based around 0.5rem or 8px.
| Class | Styles |
|---|---|
p-0 | |
p-1 | |
p-2 | |
p-3 | |
p-4 | |
p-5 | |
p-6 | |
p-8 | |
p-10 | |
p-12 | |
p-16 | |
p-20 | |
p-24 | |
p-32 | |
px-0 | |
px-1 | |
px-2 | |
px-3 | |
px-4 | |
px-5 | |
px-6 | |
px-8 | |
px-10 | |
px-12 | |
px-16 | |
px-20 | |
px-24 | |
px-32 | |
py-0 | |
py-1 | |
py-2 | |
py-3 | |
py-4 | |
py-5 | |
py-6 | |
py-8 | |
py-10 | |
py-12 | |
py-16 | |
py-20 | |
py-24 | |
py-32 | |
pt-0 | |
pt-1 | |
pt-2 | |
pt-3 | |
pt-4 | |
pt-5 | |
pt-6 | |
pt-8 | |
pt-10 | |
pt-12 | |
pt-16 | |
pt-20 | |
pt-24 | |
pt-32 | |
pb-0 | |
pb-1 | |
pb-2 | |
pb-3 | |
pb-4 | |
pb-5 | |
pb-6 | |
pb-8 | |
pb-10 | |
pb-12 | |
pb-16 | |
pb-20 | |
pb-24 | |
pb-32 | |
pl-0 | |
pl-1 | |
pl-2 | |
pl-3 | |
pl-4 | |
pl-5 | |
pl-6 | |
pl-8 | |
pl-10 | |
pl-12 | |
pl-16 | |
pl-20 | |
pl-24 | |
pl-32 | |
pr-0 | |
pr-1 | |
pr-2 | |
pr-3 | |
pr-4 | |
pr-5 | |
pr-6 | |
pr-8 | |
pr-10 | |
pr-12 | |
pr-16 | |
pr-20 | |
pr-24 | |
pr-32 | |
#All Sides
Add padding on all sides of an element using the p-<size> class.
p-4
<div class="bg-indigo-200 u-inline-flex p-4"><span class="bg-indigo-500 p-1 white">p-4</span></div>#Both Sides
Add padding to either left and right or top and bottom with the px-<size> and py-<size> classes respectively.
px-4
py-4
<div class="bg-indigo-200 u-inline-flex px-4"><span class="bg-indigo-500 p-1 white">px-4</span></div>
<div class="bg-indigo-200 u-inline-flex py-4"><span class="bg-indigo-500 p-1 white">py-4</span></div>#Single Side
For adding padding for only a single side, the class follows a convention like p<l|r|t|b>-<size>.
pl-4
pr-4
pt-4
pb-4
<div class="bg-indigo-200 u-inline-flex pl-4"><span class="bg-indigo-500 p-1 white">pl-4</span></div>
<div class="bg-indigo-200 u-inline-flex pr-4"><span class="bg-indigo-500 p-1 white">pr-4</span></div>
<div class="bg-indigo-200 u-inline-flex pt-4"><span class="bg-indigo-500 p-1 white">pt-4</span></div>
<div class="bg-indigo-200 u-inline-flex pb-4"><span class="bg-indigo-500 p-1 white">pb-4</span></div>#Responsive
The margin classes mentioned here support viewport based application. All you need to do is add a -<viewport> at the end of the class(es) you are using. For example, use p-3-md to apply p-3 on medium screens and above.
<div class="px-1 px-10-sm px-20-md">
<!-- ... -->
</div>Try out the example below yourself by resizing your browser window.
I grow with the window.
<div class="bg-purple-100 p-2 u-round u-flex u-justify-center u-items-center">
<p class="bg-purple-300 p-3 u-round py-1 px-1 px-10-sm px-20-md">I grow with the window.</p>
</div>For more information, visit the Viewports documentation.