Margin
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>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. |
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 |
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 |
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. |
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 elementFlex 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 |