Padding

A collection of utility classes to add spacing between elements and their content.

Usage

To apply this component, add one of the following classes to a block element.

ClassSize
.uk-padding-xsmall0.25rem or 4px
.uk-padding-small0.5rem or 8px
.uk-padding1rem or 16px
.uk-padding-medium2.5rem or 40px
.uk-padding-large5rem or 80px
.uk-padding-xlarge10rem or 160px
<div class="uk-padding"></div>

Position

To add margin to a specific side, use the uk-padding-[size]-[side] format. For example, uk-padding-small-top, uk-padding-xsmall-bottom, etc.

<div class="uk-padding-small-top"></div>

Remove padding

In some cases you want to remove padding from an element, rather than adding it. To do so, apply one of the following classes.

ClassDescription
.uk-padding-removeRemoves all padding from an element.
.uk-padding-remove-topRemoves top padding from an element.
.uk-padding-remove-bottomRemoves bottom padding from an element.
.uk-padding-remove-leftRemoves left padding from an element.
.uk-padding-remove-rightRemoves right padding from an element.
.uk-padding-remove-verticalRemoves top and bottom padding from an element.
.uk-padding-remove-horizontalRemoves left and right padding from an element.
Customize