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.

ClassSize
.uk-margin-xsmall0.25rem or 4px
.uk-margin-small0.5rem or 8px
.uk-margin1rem or 16px
.uk-margin-medium2.5rem or 40px
.uk-margin-large5rem or 80px
.uk-margin-xlarge10rem or 160px
<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.

ClassDescription
.uk-margin-removeRemoves all margins.
.uk-margin-remove-topRemoves top margin.
.uk-margin-remove-bottomRemoves bottom margin.
.uk-margin-remove-leftRemoves left margin.
.uk-margin-remove-rightRemoves right margin.
.uk-margin-remove-verticalRemoves all vertical margins.
.uk-margin-remove-adjacentRemoves the top margin of the directly succeeding element.
.uk-margin-remove-first-childRemoves the top margin of the first child element.
.uk-margin-remove-last-childRemoves the bottom margin of the last child element.
<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.

ClassDescription
.uk-margin-remove-left@s
.uk-margin-remove-right@s
Affects device widths of 640px and larger.
.uk-margin-remove-left@m
.uk-margin-remove-right@m
Affects device widths of 768px and larger.
.uk-margin-remove-left@l
.uk-margin-remove-right@l
Affects device widths of 1024px and larger.
.uk-margin-remove-left@xl
.uk-margin-remove-right@xl
Affects device widths of 1280px and larger.

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.

ClassDescription
.uk-margin-autoSets left and right margin to auto, horizontally centering block and flex elements.
.uk-margin-auto-topSets top margin to auto, pushing block and flex elements to the bottom.
.uk-margin-auto-bottomSets bottom margin to auto, pushing block and flex elements to the top.
.uk-margin-auto-leftSets left margin to auto, pushing block and flex elements to the right.
.uk-margin-auto-rightSets right margin to auto, pushing block and flex elements to the left
.uk-margin-auto-verticalSets top and bottom margin to auto, vertically centering only flex elements.
Copy to clipboard
  • Block element
    Flex item
  • <div class="uk-width-1-2@s uk-margin uk-margin-auto-left uk-text-center">
      Block element
    </div>
    
    <div
      class="uk-background-muted uk-flex uk-height-medium uk-margin uk-text-center"
    >
      <div class="uk-width-1-2@s uk-margin-auto uk-margin-auto-vertical">
        Flex item
      </div>
    </div>

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.

ClassDescription
.uk-margin-auto-left@s
.uk-margin-auto@s
.uk-margin-auto-right@s
Affects device widths of 640px and larger.
.uk-margin-auto-left@m
.uk-margin-auto@m
.uk-margin-auto-right@m
Affects device widths of 768px and larger.
.uk-margin-auto-left@l
.uk-margin-auto@l
.uk-margin-auto-right@l
Affects device widths of 1024px and larger.
.uk-margin-auto-left@xl
.uk-margin-auto@xl
.uk-margin-auto-right@xl
Affects device widths of 1280px and larger.
Copy to clipboard
  • Block element
    Block element
    Block element
  • <div
      class="uk-width-1-2@s uk-margin-auto@m uk-margin uk-margin-auto-right uk-text-center"
    >
      Block element
    </div>
    <div
      class="uk-width-1-2@s uk-margin-auto-left@m uk-margin uk-margin-auto uk-text-center"
    >
      Block element
    </div>
    <div
      class="uk-width-1-2@s uk-margin-auto-right@m uk-margin uk-margin-auto-left uk-text-center"
    >
      Block element
    </div>

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>
Copy to clipboard
  • <div uk-margin>
      <button class="uk-button uk-button-default">Button</button>
      <button class="uk-button uk-button-default">Button</button>
      <button class="uk-button uk-button-default">Button</button>
      <button class="uk-button uk-button-default">Button</button>
      <button class="uk-button uk-button-default">Button</button>
      <button class="uk-button uk-button-default">Button</button>
      <button class="uk-button uk-button-default">Button</button>
      <button class="uk-button uk-button-default">Button</button>
      <button class="uk-button uk-button-default">Button</button>
      <button class="uk-button uk-button-default">Button</button>
    </div>

Component options

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

OptionValueDefaultDescription
margin Stringuk-margin-small-topThis class is added to items that break into the next row, typically to create a margin for the previous row.
first-columnStringuk-first-columnThis class is added to the first element in each row.

JavaScript

Learn more about JavaScript components.

Initialization

UIkit.margin(element, options);
Customize