#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

#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

New

0.6.3

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.

Cirrus