外边距／Margin

# 外边距／Margin

<p class="uk-text-lead">用于在元素之间添加外边距的实用class。</p>

## Usage-用法

将以下一个或多个以下类添加到任何元素，以创建垂直 和/或 水平方向的外边距。

| Class               | 描述                                                                      |
| :------------------ | :------------------------------------------------------------------------------- |
| `.uk-margin`        | 添加底部边距，同时如果该元素前面还有有另一个元素的话，则同时添加上边距 |
| `.uk-margin-top`    | 添加顶部 margin                                                                 |
| `.uk-margin-bottom` | 添加底部 margin                                                              |
| `.uk-margin-left`   | 添加左侧 margin                                                                |
| `.uk-margin-right`  | 添加右侧 margin                                                               |

```html
<div class="uk-margin"></div>
```

```example
<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>
```

***

## Small margin-小尺寸边距

添加以下class之一向块元素添加较小的间距。.

| Class                     | 描述                                                                            |
| :------------------------ | :------------------------------------------------------------------------------------- |
| `.uk-margin-small`        | 添加小尺寸的底部边距，同时如果该元素前面还有有另一个元素的话，则同时添加小尺寸上边距 |
| `.uk-margin-small-top`    | 添加小尺寸的顶部边距。                                                                 |
| `.uk-margin-small-bottom` | 添加小尺寸的底部边距。                                                              |
| `.uk-margin-small-left`   | 添加小尺寸的左侧边距。                                                                |
| `.uk-margin-small-right`  | 添加小尺寸的右侧边距。                                                               |

```example
<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>
```

***

## Medium margin-中等边距

添加以下class之一向块元素添加中等大小的间距。

| Class                      | 描述                                                                             |
| :------------------------- | :-------------------------------------------------------- |
| `.uk-margin-medium`        | 添加中等大小的底部边距，同时如果该元素前面还有有另一个元素的话，则同时添加中等大小的上边距 |
| `.uk-margin-medium-top`    | 添加中等大小的顶部边距。                                                                 |
| `.uk-margin-medium-bottom` | 添加中等大小的底部边距。                                                              |
| `.uk-margin-medium-left`   | 添加中等大小的左侧边距。                                                                |
| `.uk-margin-medium-right`  | 添加中等大小的右侧边距。                                                               |

```example
<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>
```

***

## Large margin-大型边距

添加以下class之一向块元素添加较大的边距。

| Class                     | 描述                                                                        |
| :------------------------ | :--------------------------------------------------------------------------------- |
| `.uk-margin-large`        | 添加较大的底部边距，同时如果该元素前面还有有另一个元素的话，则同时添加较大尺寸的上边距。 |
| `.uk-margin-large-top`    | 添加较大的顶部边距。                                                             |
| `.uk-margin-large-bottom` | 添加较大的底部边距。                                                          |
| `.uk-margin-large-left`   | 添加较大的左侧边距。                                                            |
| `.uk-margin-large-right`  | 添加较大的右侧边距。                                                           |

```example
<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>
```

***

## Xlarge margin-加大号边距

添加以下class之一向块元素添加加大号边距。

| Class                      | 描述                                                                         |
| :------------------------- | :---------------------------------------------------------------------------------- |
| `.uk-margin-xlarge`        | 添加加大号的底部边距，同时如果该元素前面还有有另一个元素的话，则同时添加加大号上边距 |
| `.uk-margin-xlarge-top`    | 添加加大号的顶部边距。                                                             |
| `.uk-margin-xlarge-bottom` | 添加加大号的底部边距。                                                          |
| `.uk-margin-xlarge-left`   | 添加加大号的左侧边距。                                                            |
| `.uk-margin-xlarge-right`  | 添加加大号的右侧边距。                                                           |

```example
<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>
```

***

## Remove margin-移除边距

添加以下类之一来移除块元素的外边距。

| Class                           | 描述                                                |
| :------------------------------ | :--------------------------------------------------------- |
| `.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`  | 删除最后一个子元素的底边距       |

```html
<h1 class="uk-margin-remove"></h1>
```

***

### 响应式

UIkit提供了许多响应式删除边距的class。它们的使用方法与普通删除边距的class基本相同，不同的是根据它们带的后缀表示生效的断点。

| Class                                                        | 描述                                   |
| :----------------------------------------------------------- | :-------------------------------------------- |
| `.uk-margin-remove-left@s`<br> `.uk-margin-remove-right@s`   | 只在 _640px_ 及以上的设备宽度生效。  |
| `.uk-margin-remove-left@m`<br> `.uk-margin-remove-right@m`   | 只在 _960px_ 及以上的设备宽度生效。  |
| `.uk-margin-remove-left@l`<br> `.uk-margin-remove-right@l`   | 只在 _1200px_ 及以上的设备宽度生效。 |
| `.uk-margin-remove-left@xl`<br> `.uk-margin-remove-right@xl` | 只在 _1600px_ 及以上的设备宽度生效。 |

***

## Auto margin-自动边距

添加以下类别之一以设置 auto margin。这对于居中或对齐固定宽度的块元素，以及居中或对齐flex元素都非常有用。

| Class                      | 描述                                                                         |
| :------------------------- | :---------------------------------------------------------------------------------- |
| `.uk-margin-auto`          | 将左侧和右侧的 margin 设置为 auto，使块元素和 flex元素水平居中。 |
| `.uk-margin-auto-top`      | 将顶部margin设置为auto，将块元素和flex元素推到底部。             |
| `.uk-margin-auto-bottom`   | 将底部margin设置为auto，将块元素和flex元素推到顶部。.             |
| `.uk-margin-auto-left`     | 将左侧margin设置为auto，将块元素和flex元素推到右侧。             |
| `.uk-margin-auto-right`    | 将右侧margin设置为auto，将块元素和flex元素推到左侧。              |
| `.uk-margin-auto-vertical` | 将顶部和底部margin设置为auto，将flex元素垂直居中。        |

```example
<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提供了许多响应式margin auto的class。它们的使用方法与普通margin auto的class基本相同，不同的是根据它们带的后缀表示生效的断点。

| Class       | 描述    |
| :--------------------------------- | :-------------------------------------------- |
| `.uk-margin-auto-left@s`<br> `.uk-margin-auto@s`<br> `.uk-margin-auto-right@s`    | 只在 _640px_ 及以上的设备宽度生效。  |
| `.uk-margin-auto-left@m`<br> `.uk-margin-auto@m`<br>   `.uk-margin-auto-right@m`  | 只在 _960px_ 及以上的设备宽度生效。  |
| `.uk-margin-auto-left@l`<br> `.uk-margin-auto@l`<br> `.uk-margin-auto-right@l`    | 只在 _1200px_ 及以上的设备宽度生效。 |
| `.uk-margin-auto-left@xl`<br> `.uk-margin-auto@xl`<br> `.uk-margin-auto-right@xl` | 只在 _1600px_ 及以上的设备宽度生效。 |

```example
<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>
```

***

## Dynamic wrapping-动态换行

要为堆叠元素（例如，在较小视口上的换行的行内元素）增加间距，只需将 `uk-margin` 属性添加到其父容器中即可。它会自动将 `.uk-margin-small-top` class类添加到子元素上面。

```html
<div uk-margin>
    <button></button>
    <button></button>
</div>
```

```example
<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-组件选项

下面这些选项中的任何一个都可以应用于组件属性，多个选项之间用分号分隔。 [了解更多](javascript.md#component-configuration)

| 选项         | 可用值  | 默认值             | 描述                                       |
| -------------- | ------ | ------------------- | ------------- |
| `margin `      | String | uk-margin-small-top | 此类被添加到分解到下一行的项目中，通常为上一行创建边距。 |
| `first-column` | String | uk-first-column     | 此类添加到每行的第一个元素中。   |

***

## JavaScript

了解更多有关 [JavaScript 组件](javascript.md#programmatic-use)的信息。

### 初始化

```js
UIkit.margin(element, options);
```