W3.CSS Margins (邊距)

2020-11-30 14:09 更新

W3.CSS 提供以下邊距類:

定義
w3-margin 向元素的所有邊添加16px 的邊距
w3-margin-top 向元素添加 16px 的上邊距
w3-margin-right 向元素添加 16px 的右邊距
w3-margin-bottom 向元素添加 16px 底邊距
w3-margin-left 向元素添加 16px 的左邊距
w3-section
向元素添加 16px 的上邊距和下邊距

Margin (邊距)

w3-margin 類向元素的所有邊添加 16px 的邊距:

實(shí)例

<div class="w3-container w3-margin">

  <p>在所有的邊上擁有16像素的邊距。</p>

</div>


嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例

Margin Top (上邊距)

w3-margin-top 類向元素的上邊框添加 16px 的邊距:

實(shí)例

<div class="w3-container w3-margin-top">

  <p>在上邊框上擁有16像素的邊距。</p>

</div>


嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例

Margin Bottom (下邊距)

w3-margin-bottom 類向元素的下邊框添加 16px 的邊距:

實(shí)例

<div class="w3-container w3-margin-bottom">

  <p>在下邊框上擁有16像素的邊距。</p>

</div>


嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例

Margin Left (左邊距)

w3-margin-left 類向元素的左邊框添加 16px 的邊距:

實(shí)例

<div class="w3-container w3-margin-left">

  <p>在左邊框上擁有16像素的邊距。</p>

</div>


嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例

Margin Right (右邊距)

w3-margin-right 類向元素的左邊框添加 16px 的邊距:

實(shí)例

<div class="w3-container w3-margin-right">

  <p>在右邊框上擁有16像素的邊距。</p>

</div>


嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例

Sections (塊)

許多 HTML 元素沒有默認(rèn)的頂部或底部邊距。這樣的元素將在它們之間顯示空白。

w3-section 類可用于分離元素。

它向任何 HTML 元素添加 16px 的上下邊距:

實(shí)例

<div class="w3-container w3-section w3-blue">

  <h1>我是藍(lán)色的</h1>

</div>

<div class="w3-container w3-section w3-green">

  <h1>我是綠色的</h1>

</div>


嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例


以上內(nèi)容是否對(duì)您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)