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.

ClassDescription
.uk-marginAdds top margin, if it is preceded by another element, and always bottom margin.
.uk-margin-topAdds top margin.
.uk-margin-bottomAdds bottom margin.
.uk-margin-leftAdds left margin.
.uk-margin-rightAdds right margin.
<div class="uk-margin"></div>
Copy to clipboard
  • 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-card uk-card-body uk-card-default uk-margin">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
      incididunt ut labore et dolore magna aliqua.
    </div>
    <div class="uk-card uk-card-body uk-card-default uk-margin">
      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.

ClassDescription
.uk-margin-smallAdds small top margin, if it is preceded by another element, and always bottom margin.
.uk-margin-small-topAdds small top margin.
.uk-margin-small-bottomAdds small bottom margin.
.uk-margin-small-leftAdds small left margin.
.uk-margin-small-rightAdds small right margin.
Copy to clipboard
  • 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-card uk-card-body uk-card-default uk-margin-small">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
      incididunt ut labore et dolore magna aliqua.
    </div>
    <div class="uk-card uk-card-body uk-card-default uk-margin-small">
      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.

ClassDescription
.uk-margin-mediumAdds medium top margin, if it is preceded by another element, and always bottom margin.
.uk-margin-medium-topAdds medium top margin.
.uk-margin-medium-bottomAdds medium bottom margin.
.uk-margin-medium-leftAdds medium left margin.
.uk-margin-medium-rightAdds medium right margin.
Copy to clipboard
  • 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-card uk-card-body uk-card-default uk-margin-medium">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
      incididunt ut labore et dolore magna aliqua.
    </div>
    <div class="uk-card uk-card-body uk-card-default uk-margin-medium">
      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.

ClassDescription
.uk-margin-largeAdds large margin, if it is preceded by another element, and always bottom margin.
.uk-margin-large-topAdds large top margin.
.uk-margin-large-bottomAdds large bottom margin.
.uk-margin-large-leftAdds large left margin.
.uk-margin-large-rightAdds large right margin.
Copy to clipboard
  • 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-body uk-card-default">
      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-body uk-card-default">
      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.

ClassDescription
.uk-margin-xlargeAdds larger margin, if it is preceded by another element, and always bottom margin.
.uk-margin-xlarge-topAdds larger top margin.
.uk-margin-xlarge-bottomAdds larger bottom margin.
.uk-margin-xlarge-leftAdds larger left margin.
.uk-margin-xlarge-rightAdds larger right margin.
Copy to clipboard
  • 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-body uk-card-default">
      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-body uk-card-default">
      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 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-card uk-card-body uk-card-default 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-card uk-card-body uk-card-default 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-card uk-card-body uk-card-default 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-card uk-card-body uk-card-default uk-margin uk-margin-auto uk-text-center"
    >
      Block element
    </div>
    <div
      class="uk-width-1-2@s uk-margin-auto-right@m uk-card uk-card-body uk-card-default 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);

Theme development

On your tailwind.config.js file, add the Margin component within the ui() plugin.

import ui from "franken-ui";

ui({
    components: {
        margin: {
            hooks: {},
            media: true
        }
    }
}),

Available hooks

Note If you are developing theme from scratch, you can use all these hooks. If you’re using the shadcn/ui theme, some hooks might not work as they were already in use or removed. Learn more about using hooks.

Hook NameAffected Classes
hook-misc*