菜单
×
   ❮     
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA GEN AI SCIPY AWS CYBERSECURITY DATA SCIENCE
     ❯   

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 的外边距。

示例

<div class="w3-container w3-margin">
  <p>我的四周都有 16px 的外边距。</p>
</div>
自己试试 »

顶部外边距

w3-margin-top 类为元素添加 16px 的顶部外边距

w3-margin-top 类为元素添加 16px 的顶部外边距。

示例

<div class="w3-container w3-margin-top">
  <p>我的顶部有 16px 的外边距。</p>
</div>
自己试试 »


底部外边距

w3-margin-bottom 类为元素添加 16px 的底部外边距

w3-margin-bottom 类为元素添加 16px 的底部外边距。

示例

<div class="w3-container w3-margin-bottom">
  <p>我的底部有 16px 的外边距。</p>
</div>
自己试试 »

左侧外边距

w3-margin-left 类为元素添加 16px 的左侧外边距

w3-margin-left 类为元素添加 16px 的左侧外边距。

示例

<div class="w3-container w3-margin-left">
  <p>我的左侧有 16px 的外边距。</p>
</div>
自己试试 »

右侧外边距

w3-margin-right 类为元素添加 16px 的右侧外边距

w3-margin-right 类为元素添加 16px 的右侧外边距。

示例

<div class="w3-container w3-margin-right">
  <p>我的右侧有 16px 的外边距。</p>
</div>
自己试试 »

区块

许多 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>
自己试试 »

×

联系销售

如果您想将 W3Schools 服务用于教育机构、团队或企业,请发送电子邮件给我们
sales@w3schools.com

报告错误

如果您想报告错误,或想提出建议,请发送电子邮件给我们
help@w3schools.com

W3Schools 经过优化,旨在方便学习和培训。示例可能经过简化,以提高阅读和学习体验。教程、参考资料和示例会不断审查,以避免错误,但我们无法保证所有内容的完全正确性。使用 W3Schools 即表示您已阅读并接受我们的使用条款Cookie 和隐私政策

版权所有 1999-2024 Refsnes Data。保留所有权利。W3Schools 由 W3.CSS 提供支持