#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.

ClassStyles

#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>