Padding

Adjust whitespace with horizontal and vertical spacing with`block` level `padding` adjustment helpers.

Usage

When to Use

Padding classes can be applied to block level items to provide a padding on that item. (For margin adjustments, see Spacing.)

Base Unit

The base space size is 1.25rem or 20px.

Padding classes

ALPS uses padding classes to apply varying padding to the current element. The classes, detailed below and starting with u-padding, add a varying padding size to all or individual sides.

Class Name	Description
`u-padding`	Use this class to apply a default `padding` to all four sides of an item.
`u-padding--top`	Use this class to apply a default `padding` to the top of an item.
`u-padding--bottom`	Use this class to apply a default `padding` to the bottom of an item.
`u-padding--right`	Use this class to apply a default `padding` to the right of an item.
`u-padding--left`	Use this class to apply a default `padding` to the left of an item.
`u-padding--quarter`	Use this class to apply a quarter size `padding` to an item.
`u-padding--quarter--top`	Use this class to apply a quarter size `padding` to the top of an item.
`u-padding--quarter--bottom`	Use this class to apply a quarter size `padding` to the bottom of an item.
`u-padding--quarter--right`	Use this class to apply a quarter size `padding` to the right of an item.
`u-padding--quarter--left`	Use this class to apply a quarter size `padding` to the left of an item.
`u-padding--half`	Use this class to apply a half size `padding` to an item.
`u-padding--half--top`	Use this class to apply a half size `padding` to the top of an item.
`u-padding--half--bottom`	Use this class to apply a half size `padding` to the bottom of an item.
`u-padding--half--right`	Use this class to apply a half size `padding` to the right of an item.
`u-padding--half--left`	Use this class to apply a half size `padding` to the left of an item.
`u-padding--double`	Use this class to apply a double size `padding` to an item.
`u-padding--double--top`	Use this class to apply a double size `padding` to the top of an item.
`u-padding--double--bottom`	Use this class to apply a double size `padding` to the bottom of an item.
`u-padding--double--right`	Use this class to apply a double size `padding` to the right of an item.
`u-padding--double--left`	Use this class to apply a double size `padding` to the left of an item.
`u-padding--triple`	Use this class to apply a triple size `padding` to an item.
`u-padding--triple--top`	Use this class to apply a triple size `padding` to the top of an item.
`u-padding--triple--bottom`	Use this class to apply a triple size `padding` to the bottom of an item.
`u-padding--triple--right`	Use this class to apply a triple size `padding` to the right of an item.
`u-padding--triple--left`	Use this class to apply a triple size `padding` to the left of an item.
`u-padding--quad`	Use this class to apply a quad size `padding` to an item.
`u-padding--quad--top`	Use this class to apply a quad size `padding` to the top of an item.
`u-padding--quad--bottom`	Use this class to apply a quad size `padding` to the bottom of an item.
`u-padding--quad--right`	Use this class to apply a quad size `padding` to the right of an item.
`u-padding--quad--left`	Use this class to apply a quad size `padding` to the left of an item.
`u-padding--zero`	Use this class to apply a `padding` of 0rem to an item.
`u-padding--zero--top`	Use this class to apply a `padding` of 0rem to the top of an item.
`u-padding--zero--bottom`	Use this class to apply a `padding` of 0rem to the bottom of an item.
`u-padding--zero--right`	Use this class to apply a `padding` of 0rem to the right of an item.
`u-padding--zero--left`	Use this class to apply a `padding` of 0rem to the left of an item.
`u-padding--sides`	Use this class to apply a `padding` to the left and right sides on viewports below `large` of `0.9375rem`, or `15px` and on viewports of `large` or higher of `1.25rem` or `20px`.
`u-padding--left--until-xxlarge`	Use this class to apply a `padding` to the left side on viewports below `large` of `0.9375rem`, or `15px` and on viewports of `large` or higher of `1.25rem` or `20px`. Above xxlarge, the padding drops to `0`.
`u-padding--zero--sides`	Use this class to apply a padding of `0 !important` to all sides.

Fine print

Last updated:

Learn More:

Documentation