閱讀(2.1k) 書簽贊(0) 我要糾錯(cuò)

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í)例

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

</div>

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

Margin Top (上邊距)

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

實(shí)例

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

</div>

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

Margin Bottom (下邊距)

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

實(shí)例

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

</div>

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

Margin Left (左邊距)

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

實(shí)例

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

</div>

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

Margin Right (右邊距)

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

實(shí)例

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

</div>

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

Sections (塊)

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

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

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

實(shí)例

</div>

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

</div>

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

以上內(nèi)容是否對(duì)您有幫助：

← W3.CSS Padding (填充)

W3.CSS Display (顯示) →

寫筆記

我要補(bǔ)充

W3.CSS Margins (邊距)

Margin (邊距)

實(shí)例

Margin Top (上邊距)

實(shí)例

Margin Bottom (下邊距)

實(shí)例

Margin Left (左邊距)

實(shí)例

Margin Right (右邊距)

實(shí)例

Sections (塊)

實(shí)例

推薦文章

推薦教程

推薦課程