邊距
一系列用於在元素之間新增間距的實用類別。
用法
將下列一個或多個類別新增至任何元素，以建立與段落通常相同的垂直和/或水平邊距。
| 類別 | 描述 |
|---|---|
.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 |
影響 640 像素 和更大的裝置寬度。 |
.uk-margin-remove-left@m.uk-margin-remove-right@m |
影響 960 像素 和更大的裝置寬度。 |
.uk-margin-remove-left@l.uk-margin-remove-right@l |
影響 1200 像素 和更大的裝置寬度。 |
.uk-margin-remove-left@xl.uk-margin-remove-right@xl |
影響 1600 像素 和更大的裝置寬度。 |
自動邊距
新增下列其中一個類別來設定自動邊距。這對於將固定寬度的區塊元素以及彈性元素置中或以其他方式對齊非常有用。
| 類別 | 描述 |
|---|---|
.uk-margin-auto |
將左右邊距設定為自動，水平置中區塊和彈性元素。 |
.uk-margin-auto-top |
將上邊距設定為自動，將區塊和彈性元素推到最底部。 |
.uk-margin-auto-bottom |
將下邊距設定為自動，將區塊和彈性元素推到最頂部。 |
.uk-margin-auto-left |
將左邊距設定為自動，將區塊和彈性元素推到右邊。 |
.uk-margin-auto-right |
將右邊距設定為自動，將區塊和彈性元素推到左邊 |
.uk-margin-auto-vertical |
將上下邊距設定為自動，垂直置中彈性元素。 |
區塊元素
彈性項目
<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 |
影響 640 像素 和更大的裝置寬度。 |
.uk-margin-auto-left@m.uk-margin-auto@m.uk-margin-auto-right@m |
影響 960 像素 和更大的裝置寬度。 |
.uk-margin-auto-left@l.uk-margin-auto@l.uk-margin-auto-right@l |
影響 1200 像素 和更大的裝置寬度。 |
.uk-margin-auto-left@xl.uk-margin-auto@xl.uk-margin-auto-right@xl |
影響 1600 像素 和更大的裝置寬度。 |
區塊元素
區塊元素
區塊元素
<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 |
字串 | uk-margin-small-top |
此類別新增至斷成下一行的項目，通常是為了在上一行建立邊距。 |
first-column |
字串 | uk-first-column |
此類別新增至每一行的第一個元素。 |
JavaScript
深入瞭解JavaScript 元件。
初始化
UIkit.margin(element, options);