#Padding
These are utility classes used to add padding for any element.
These are utility classes used to add padding for any element.
These are the different sizes supported for padding. Note that all calculations are based around 0.5rem
or 8px
.
Class | Styles |
---|
Add padding on all sides of an element using the p-<size>
class.
<div class="bg-indigo-200 u-inline-flex p-4"><span class="bg-indigo-500 p-1 white">p-4</span></div>
Add padding to either left and right or top and bottom with the px-<size>
and py-<size>
classes respectively.
<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>
For adding padding for only a single side, the class follows a convention like p<l|r|t|b>-<size>
.
<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>
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.