外边距
用于在元素之间添加间距的实用类集合。
用法
将以下一个或多个类添加到任何元素，以创建与段落通常具有的相同垂直和/或水平外边距。
| 类 | 描述 |
|---|---|
.uk-margin |
如果前面有另一个元素，则添加上外边距，并始终添加下外边距。 |
.uk-margin-top |
添加上外边距。 |
.uk-margin-bottom |
添加下外边距。 |
.uk-margin-left |
添加左外边距。 |
.uk-margin-right |
添加右外边距。 |
<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>
超小外边距
添加以下类之一，为块级元素添加非常小的间距。
| 类 | 描述 |
|---|---|
.uk-margin-xsmall |
如果前面有另一个元素，则添加较小的上外边距，并始终添加下外边距。 |
.uk-margin-xsmall-top |
添加较小的上外边距。 |
.uk-margin-xsmall-bottom |
添加较小的下外边距。 |
.uk-margin-xsmall-left |
添加较小的左外边距。 |
.uk-margin-xsmall-right |
添加较小的右外边距。 |
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-xsmall 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-xsmall 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>小外边距
添加以下类之一，为块级元素添加小的间距。
| 类 | 描述 |
|---|---|
.uk-margin-small |
如果前面有另一个元素，则添加小的上外边距，并始终添加下外边距。 |
.uk-margin-small-top |
添加小的上外边距。 |
.uk-margin-small-bottom |
添加小的下外边距。 |
.uk-margin-small-left |
添加小的左外边距。 |
.uk-margin-small-right |
添加小的右外边距。 |
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>中等外边距
添加以下类之一，为块级元素添加中等的间距。
| 类 | 描述 |
|---|---|
.uk-margin-medium |
如果前面有另一个元素，则添加中等的上外边距，并始终添加下外边距。 |
.uk-margin-medium-top |
添加中等的上外边距。 |
.uk-margin-medium-bottom |
添加中等的下外边距。 |
.uk-margin-medium-left |
添加中等的左外边距。 |
.uk-margin-medium-right |
添加中等的右外边距。 |
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>大外边距
添加以下类之一，为块级元素添加大的间距。
| 类 | 描述 |
|---|---|
.uk-margin-large |
如果前面有另一个元素，则添加大外边距，并始终添加下外边距。 |
.uk-margin-large-top |
添加大的上外边距。 |
.uk-margin-large-bottom |
添加大的下外边距。 |
.uk-margin-large-left |
添加大的左外边距。 |
.uk-margin-large-right |
添加大的右外边距。 |
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>超大外边距
添加以下类之一，为块级元素添加非常大的间距。
| 类 | 描述 |
|---|---|
.uk-margin-xlarge |
如果前面有另一个元素，则添加较大的外边距，并始终添加下外边距。 |
.uk-margin-xlarge-top |
添加较大的上外边距。 |
.uk-margin-xlarge-bottom |
添加较大的下外边距。 |
.uk-margin-xlarge-left |
添加较大的左外边距。 |
.uk-margin-xlarge-right |
添加较大的右外边距。 |
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>移除外边距
添加以下类之一，从块级元素中移除外边距。
| 类 | 描述 |
|---|---|
.uk-margin-remove |
移除所有外边距。 |
.uk-margin-remove-top |
移除上外边距。 |
.uk-margin-remove-bottom |
移除下外边距。 |
.uk-margin-remove-left |
移除左外边距。 |
.uk-margin-remove-right |
移除右外边距。 |
.uk-margin-remove-vertical |
移除所有垂直外边距。 |
.uk-margin-remove-adjacent |
移除紧随其后的元素的上外边距。 |
.uk-margin-remove-first-child |
移除第一个子元素的上外边距。 |
.uk-margin-remove-last-child |
移除最后一个子元素的下外边距。 |
<h1 class="uk-margin-remove"></h1>响应式
UIkit 提供了一些响应式类来移除外边距。基本上，它们的工作方式与通常的外边距移除类相同，只是它们具有表示生效断点的后缀。
| 类 | 描述 |
|---|---|
.uk-margin-remove-left@s.uk-margin-remove-right@s |
影响设备宽度为640px及以上的设备。 |
.uk-margin-remove-left@m.uk-margin-remove-right@m |
影响设备宽度为960px及以上的设备。 |
.uk-margin-remove-left@l.uk-margin-remove-right@l |
影响设备宽度为1200px及以上的设备。 |
.uk-margin-remove-left@xl.uk-margin-remove-right@xl |
影响设备宽度为1600px及以上的设备。 |
自动外边距
添加以下类之一以设置自动外边距。 这对于居中或以其他方式对齐具有固定宽度的块级元素以及弹性元素非常有用。
| 类 | 描述 |
|---|---|
.uk-margin-auto |
将左外边距和右外边距设置为 auto，水平居中块级和弹性元素。 |
.uk-margin-auto-top |
将上外边距设置为 auto，将块级和弹性元素推到底部。 |
.uk-margin-auto-bottom |
将下外边距设置为 auto，将块级和弹性元素推到顶部。 |
.uk-margin-auto-left |
将左外边距设置为 auto，将块级和弹性元素推到右侧。 |
.uk-margin-auto-right |
将右外边距设置为 auto，将块级和弹性元素推到左侧 |
.uk-margin-auto-vertical |
将上外边距和下外边距设置为 auto，仅垂直居中弹性元素。 |
块级元素
弹性项目
<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>响应式
UIkit 提供了一些响应式外边距自动类。 基本上，它们的工作方式与通常的外边距自动类相同，只是它们具有表示生效断点的后缀。
| 类 | 描述 |
|---|---|
.uk-margin-auto-left@s.uk-margin-auto@s.uk-margin-auto-right@s |
影响设备宽度为640px及以上的设备。 |
.uk-margin-auto-left@m.uk-margin-auto@m.uk-margin-auto-right@m |
影响设备宽度为960px及以上的设备。 |
.uk-margin-auto-left@l.uk-margin-auto@l.uk-margin-auto-right@l |
影响设备宽度为1200px及以上的设备。 |
.uk-margin-auto-left@xl.uk-margin-auto@xl.uk-margin-auto-right@xl |
影响设备宽度为1600px及以上的设备。 |
块级元素
块级元素
块级元素
<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>动态换行
要向堆叠元素添加间距，例如在较小视口上换行的内联元素，只需将 `uk-margin` 属性添加到其父容器即可。 它会自动将 `.uk-margin-small-top` 类添加到较低的元素。
<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>组件选项
这些选项中的任何一个都可以应用于组件属性。 用分号分隔多个选项。了解更多
| 选项 | 值 | 默认值 | 描述 |
|---|---|---|---|
margin |
String | uk-margin-small-top |
此类添加到断行到下一行的项目，通常是为上一行创建外边距。 |
first-column |
String | uk-first-column |
此类添加到每行的第一个元素。 |
JavaScript
详细了解JavaScript 组件。
初始化
UIkit.margin(element, options);