W3.CSS 外邊距
w3-margin 類會在元素的四周新增 16px 的外邊距。
W3.CSS 外邊距類
W3.CSS 提供以下外邊距類
| 類 | 定義 |
|---|---|
| w3-margin | 為元素的四周新增 16px 的外邊距 |
| w3-margin-top | 為元素新增 16px 的頂部外邊距 |
| w3-margin-right | 為元素新增 16px 的右側外邊距 |
| w3-margin-bottom | 為元素新增 16px 的底部外邊距 |
| w3-margin-left | 為元素新增 16px 的左側外邊距 |
| w3-section | 為元素的頂部和底部新增 16px 的外邊距 |
外邊距
w3-margin 類會在元素的四周新增 16px 的外邊距
w3-margin 類會在元素的四周新增 16px 的外邊距。
頂部外邊距
w3-margin-top 類為元素新增 16px 的頂部外邊距
w3-margin-top 類為元素新增 16px 的頂部外邊距。
底部外邊距
w3-margin-bottom 類為元素新增 16px 的底部外邊距
w3-margin-bottom 類為元素新增 16px 的底部外邊距。
左側外邊距
w3-margin-left 類為元素新增 16px 的左側外邊距
w3-margin-left 類為元素新增 16px 的左側外邊距。
右側外邊距
w3-margin-right 類為元素新增 16px 的右側外邊距
w3-margin-right 類為元素新增 16px 的右側外邊距。
區塊
許多 HTML 元素預設沒有頂部或底部外邊距。這些元素會顯示為沒有間距。
我是藍色
我是綠色
w3-section 類可用於分隔元素。
它會為任何 HTML 元素新增16px 的頂部和底部外邊距
我是藍色
我是綠色
示例
<div class="w3-container w3-section w3-blue">
<h1>我是藍色</h1>
</div>
<div class="w3-container w3-section w3-green">
<h1>我是綠色</h1>
</div>
自己試試 »
