Margin
用于在元素之间添加外边距的实用class。
用法
将以下一个或多个以下类添加到任何元素，以创建垂直 和/或 水平方向的外边距。
| Class | Description |
|---|---|
.uk-margin |
添加底部边距，同时如果该元素前面还有有另一个元素的话，则同时添加上边距 |
.uk-margin-top |
添加顶部 margin |
.uk-margin-bottom |
添加底部 margin |
.uk-margin-left |
添加左侧 margin |
.uk-margin-right |
添加右侧 margin |
<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>
小尺寸margin
添加以下class之一向块元素添加较小的间距。
| Class | Description |
|---|---|
.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>
中等边距
添加以下class之一向块元素添加中等大小的间距。
| Class | Description |
|---|---|
.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>
大型边距
添加以下class之一向块元素添加较大的边距。
| Class | Description |
|---|---|
.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>
加大号边距
添加以下class之一向块元素添加加大号边距。
| Class | Description |
|---|---|
.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>
移除边距
添加以下类之一来移除块元素的外边距。
| Class | Description |
|---|---|
.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提供了许多响应式删除边距的class。它们的使用方法与普通删除边距的class基本相同，不同的是根据它们带的后缀表示生效的断点。
| Class | Description |
|---|---|
.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及以上的设备宽度生效。 |
Auto margin
添加以下类别之一以设置 auto margin。这对于居中或对齐固定宽度的块元素，以及居中或对齐flex元素都非常有用。
| Class | Description |
|---|---|
.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元素垂直居中。 |
-
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>
margin auto响应式
UIkit提供了许多响应式margin auto的class。它们的使用方法与普通margin auto的class基本相同，不同的是根据它们带的后缀表示生效的断点。
| Class | Description |
|---|---|
.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 elementBlock elementBlock 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>
组件选项
下面这些选项中的任何一个都可以应用于组件属性，多个选项之间用分号分隔。 了解更多
| 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 margin to the previous row. |
first-column |
String | uk-first-column | This class is added to the first element in each row. |
JavaScript
了解更多有关JavaScript 组件的信息。
初始化
UIkit.margin(element, options);