Margin

A collection of utility classes to add spacing between elements.

Usage

To apply this component, add one of the following classes to any element. If the element is preceded by another element, a top margin will be applied. Otherwise, a bottom margin will always be applied.

<div class="uk-margin"></div>

Position

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

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

Remove margin

Add one of the following classes to remove the margin from block elements.

<h1 class="uk-margin-remove"></h1>

Responsive

UIkit provides a number of responsive classes to remove margins. Basically, they work just like the usual margin remove classes, except that they have suffixes that represent the breakpoint from which they come into effect.

Auto margin

Add one of the following classes to set auto margin. This can be useful to center or otherwise align block elements with a fixed width as well as flex elements.

Responsive

UIkit provides a number of responsive margin auto classes. Basically, they work just like the usual margin auto classes, except that they have suffixes that represent the breakpoint from which they come into effect.

Dynamic wrapping

To add spacing to stacking elements, for example inline elements that wrap on smaller viewports, just add the uk-margin attribute to their parent container. It will automatically add the .uk-margin-small-top class to the lower element.

<div uk-margin>
  <button></button>
  <button></button>
</div>

Component options

Any of these options can be applied to the component attribute. Separate multiple options with a semicolon. Learn more

JavaScript

Learn more about JavaScript components.

Initialization

UIkit.margin(element, options);