We're sorry, but this feature is not yet available. We are working hard to make it happen as soon as possible. Thank you for your patience and understanding. Please check back later for updates.
The element you clicked is for demonstration purposes only and does not lead to actual content. Everything you see here is a simulation intended to demonstrate how the UI elements might look and behave in a real application.
A collection of utility classes to add spacing between elements.
Note If you are not using Tailwind
CSS, you can skip this step. 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
}
}
}),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><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>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. |
<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>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. |
<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>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. |
<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>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. |
<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>Add one of the following classes to remove the 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>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.
| 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 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. |
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. |
<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>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.
| 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 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. |
<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>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>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 a margin for the previous row. |
first-column | String | uk-first-column | This class is added to the first element in each row. |
Learn more about JavaScript components.
UIkit.margin(element, options);