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 的边距:

实例

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

  <p>在所有的边上拥有16像素的边距。</p>

</div>


尝试一下 »
点击“尝试一下”按钮查看在线实例

Margin Top (上边距)

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

实例

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

  <p>在上边框上拥有16像素的边距。</p>

</div>


尝试一下 »
点击“尝试一下”按钮查看在线实例

Margin Bottom (下边距)

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

实例

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

  <p>在下边框上拥有16像素的边距。</p>

</div>


尝试一下 »
点击“尝试一下”按钮查看在线实例

Margin Left (左边距)

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

实例

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

  <p>在左边框上拥有16像素的边距。</p>

</div>


尝试一下 »
点击“尝试一下”按钮查看在线实例

Margin Right (右边距)

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

实例

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

  <p>在右边框上拥有16像素的边距。</p>

</div>


尝试一下 »
点击“尝试一下”按钮查看在线实例

Sections (块)

许多 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>


尝试一下 »
点击“尝试一下”按钮查看在线实例


以上内容是否对您有帮助:

您可能还喜欢:

在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号