Margin

一组用于在元素之间添加间距的工具类。

用法

为任意元素添加下面这些类中的一个或多个，即可创建与普通段落相同的垂直和/或水平外边距。

类	说明
`.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.

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

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

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

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

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

<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 及以上的设备。

自动外边距

添加下面这些类中的某一个，可把外边距设为自动。这在把固定宽度的块级元素以及 flex 元素居中或做其他对齐时很有用。

类	说明
`.uk-margin-auto`	把左右外边距设为自动，让块级元素和 flex 元素水平居中。
`.uk-margin-auto-top`	把顶部外边距设为自动，让块级元素和 flex 元素被推到最下方。
`.uk-margin-auto-bottom`	把底部外边距设为自动，让块级元素和 flex 元素被推到最上方。
`.uk-margin-auto-left`	把左侧外边距设为自动，让块级元素和 flex 元素被推到最右方。
`.uk-margin-auto-right`	把右侧外边距设为自动，让块级元素和 flex 元素被推到最左方
`.uk-margin-auto-vertical`	把上下外边距设为自动，仅对 flex 元素做垂直居中。

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>

响应式

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 及以上的设备。

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>

动态换行

要为可能上下堆叠的元素（例如在较小视口下换行的行内元素）添加间距，只需为它们的父容器添加 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);

文档

Margin