codecamp

W3.CSS Margins (边距)

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>


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


W3.CSS Padding (填充)
W3.CSS Display (显示)
温馨提示
下载编程狮App,免费阅读超1000+编程语言教程
取消
确定
目录

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }