Margin

A collection of utility classes to add spacing between elements.

Usage

Add one or more of the following classes to any element to create the same vertical and/or horizontal margin that a paragraph usually has.

Class Description
.uk-margin Adds top margin, if it is preceded by another element, and always bottom margin.
.uk-margin-top Adds top margin.
.uk-margin-bottom Adds bottom margin.
.uk-margin-left Adds left margin.
.uk-margin-right Adds right margin.
<div class="uk-margin"></div>
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  • <div class="uk-margin uk-card uk-card-default uk-card-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
    <div class="uk-margin uk-card uk-card-default uk-card-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>

Small margin

Add one of the following classes to add small spacing to block elements.

Class Description
.uk-margin-small Adds small top margin, if it is preceded by another element, and always bottom margin.
.uk-margin-small-top Adds small top margin.
.uk-margin-small-bottom Adds small bottom margin.
.uk-margin-small-left Adds small left margin.
.uk-margin-small-right Adds small right margin.
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  • <div class="uk-margin-small uk-card uk-card-default uk-card-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
    <div class="uk-margin-small uk-card uk-card-default uk-card-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>

Medium margin

Add one of the following classes to add medium spacing to block elements.

Class Description
.uk-margin-medium Adds medium top margin, if it is preceded by another element, and always bottom margin.
.uk-margin-medium-top Adds medium top margin.
.uk-margin-medium-bottom Adds medium bottom margin.
.uk-margin-medium-left Adds medium left margin.
.uk-margin-medium-right Adds medium right margin.
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  • <div class="uk-margin-medium uk-card uk-card-default uk-card-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
    <div class="uk-margin-medium uk-card uk-card-default uk-card-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>

Large margin

Add one of the following classes to add large spacing to block elements.

Class Description
.uk-margin-large Adds large margin, if it is preceded by another element, and always bottom margin.
.uk-margin-large-top Adds large top margin.
.uk-margin-large-bottom Adds large bottom margin.
.uk-margin-large-left Adds large left margin.
.uk-margin-large-right Adds large right margin.
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  • <div class="uk-margin-large uk-card uk-card-default uk-card-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
    <div class="uk-margin-large uk-card uk-card-default uk-card-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>

X-Large margin

Add one of the following classes to add very large spacing to block elements.

Class Description
.uk-margin-xlarge Adds larger margin, if it is preceded by another element, and always bottom margin.
.uk-margin-xlarge-top Adds larger top margin.
.uk-margin-xlarge-bottom Adds larger bottom margin.
.uk-margin-xlarge-left Adds larger left margin.
.uk-margin-xlarge-right Adds larger right margin.
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  • <div class="uk-margin-xlarge uk-card uk-card-default uk-card-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
    <div class="uk-margin-xlarge uk-card uk-card-default uk-card-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>

Remove margin

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

Class Description
.uk-margin-remove Removes all margins.
.uk-margin-remove-top Removes top margin.
.uk-margin-remove-bottom Removes bottom margin.
.uk-margin-remove-left Removes left margin.
.uk-margin-remove-right Removes right margin.
.uk-margin-remove-vertical Removes all vertical margins.
.uk-margin-remove-adjacent Removes the top margin of the directly succeeding element.
.uk-margin-remove-first-child Removes the top margin of the first child element.
.uk-margin-remove-last-child Removes the bottom margin of the last child element.
<h1 class="uk-margin-remove"></h1>

Responsive

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

Class Description
.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 960px and larger.
.uk-margin-remove-left@l
.uk-margin-remove-right@l
Affects device widths of 1200px and larger.
.uk-margin-remove-left@xl
.uk-margin-remove-right@xl
Affects device widths of 1600px 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.

Class Description
.uk-margin-auto Sets left and right margin to auto, horizontally centering block and flex elements.
.uk-margin-auto-top Sets top margin to auto, pushing block and flex elements to the bottom.
.uk-margin-auto-bottom Sets bottom margin to auto, pushing block and flex elements to the top.
.uk-margin-auto-left Sets left margin to auto, pushing block and flex elements to the right.
.uk-margin-auto-right Sets right margin to auto, pushing block and flex elements to the left
.uk-margin-auto-vertical Sets top and bottom margin to auto, vertically centering only flex elements.
  • Block element
    Flex item
  • <div class="uk-margin uk-margin-auto-left uk-width-1-2@s uk-card uk-card-default uk-card-body uk-text-center">Block element</div>
    
    <div class="uk-flex uk-height-medium uk-background-muted uk-margin uk-text-center">
        <div class="uk-margin-auto uk-margin-auto-vertical uk-width-1-2@s uk-card uk-card-default uk-card-body">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 to effect.

Class Description
.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 960px and larger.
.uk-margin-auto-left@l
.uk-margin-auto-@l
.uk-margin-auto-right@l
Affects device widths of 1200px and larger.
.uk-margin-auto-left@xl
.uk-margin-auto-@xl
.uk-margin-auto-right@xl
Affects device widths of 1600px and larger.
  • Block element
    Block element
    Block element
  • <div class="uk-margin uk-margin-auto-right uk-margin-auto@m uk-width-1-2@s uk-card uk-card-default uk-card-body uk-text-center">Block element</div>
    <div class="uk-margin uk-margin-auto uk-margin-auto-left@m uk-width-1-2@s uk-card uk-card-default uk-card-body uk-text-center">Block element</div>
    <div class="uk-margin uk-margin-auto-left uk-margin-auto-right@m uk-width-1-2@s uk-card uk-card-default uk-card-body 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>
  • <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

Option Value Default Description
margin String uk-margin-small-top This class is added to items that break into the next row, typically to create margin to the previous row.
first-column String uk-first-column This class is added to the first element in each row.

JavaScript

Learn more about JavaScript components.

Initialization

UIkit.margin(element, options);