#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. You can also modify it to use a different base size other than 0.5rem within _config.scss -- see Variants below.
| Class | Styles |
|---|---|
p-px | |
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 | |
p-48 | |
p-64 | |
px-px | |
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 | |
px-48 | |
px-64 | |
py-px | |
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 | |
py-48 | |
py-64 | |
pt-px | |
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 | |
pt-48 | |
pt-64 | |
pb-px | |
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 | |
pb-48 | |
pb-64 | |
pl-px | |
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 | |
pl-48 | |
pl-64 | |
pr-px | |
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 | |
pr-48 | |
pr-64 | |
Supported Pseudo-Variants
active
checked
dark
disabled
first-of-type
focus
focus-visible
focus-within
group-focus
group-hover
hover
landscape
last-of-type
light
portrait
reduce-motion
responsive
visited
See more pseudo-variants.
#All Sides
Add padding on all sides of an element using the p-<size> class.
p-4
<div class="bg-indigo-100 u-round-xs text-white u-inline-flex p-4"><span class="bg-indigo-500 u-round-xs u-shadow-lg p-1">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-100 u-round-xs text-white u-inline-flex px-4"><span class="bg-indigo-500 u-round-xs u-shadow-lg p-1">px-4</span></div>
<div class="bg-indigo-100 u-round-xs text-white u-inline-flex py-4"><span class="bg-indigo-500 u-round-xs u-shadow-lg p-1">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-100 u-round-xs text-white u-inline-flex pl-4"><span class="bg-indigo-500 u-round-xs u-shadow-lg p-1">pl-4</span></div>
<div class="bg-indigo-100 u-round-xs text-white u-inline-flex pr-4"><span class="bg-indigo-500 u-round-xs u-shadow-lg p-1">pr-4</span></div>
<div class="bg-indigo-100 u-round-xs text-white u-inline-flex pt-4"><span class="bg-indigo-500 u-round-xs u-shadow-lg p-1">pt-4</span></div>
<div class="bg-indigo-100 u-round-xs text-white u-inline-flex pb-4"><span class="bg-indigo-500 u-round-xs u-shadow-lg p-1">pb-4</span></div>#Responsive
The margin classes mentioned here support viewport based application. All you need to do is add a <viewport>:<class> at the end of the class(es) you are using. For example, use md:p-3 to apply p-3 on medium screens and above.
<div class="px-1 sm:px-10 md:px-20">
<!-- ... -->
</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-xs u-flex u-justify-center u-items-center text-white">
<p class="bg-purple-300 u-round-xs p-3 sm:px-10 md:px-20 u-shadow-lg m-0">I grow with the window.</p>
</div>For more information, visit the Viewports documentation.
#Variants
The classes specified above are the default utility classes for setting paddings. You can add, change, or remove classes within the _config.scss file of Cirrus. The generated values are dependent on the values set for the base-size and steps fields in the config.
Below is an example of what gets generated when the base-size is set to 1rem and we add 64 to the list of steps.
Recall that these configs are merged with the $default-config map.
// _config.scss
$config: (
extend: (
sizing-system: (
base-size: 1rem,
steps: (64)
)
)
) !default;This would generate the following classes.
:root {
--space-size: 1rem;
}
.p-0 {
padding: calc(var(--space-size) * 0) !important;
}
/* ... */
.p-64 {
padding: calc(var(--space-size) * 64) !important;
}
/* Other viewport variants for padding... */Learn more about how to extend Cirrus to support your use cases in the Configuration documentation.