W3.CSS 容器
这是我的标题
这是我的文章
本文为浅灰色，文字为棕色。本文为浅灰色，文字为棕色。本文为浅灰色，文字为棕色。本文为浅灰色，文字为棕色。本文为浅灰色，文字为棕色。
这是我的页脚
容器类
这 w3-容器 该类会向任何 HTML 元素添加 16px 的左右填充。
这 w3-容器 class 是适用于所有 HTML 容器元素的完美类，例如：
<div> ，<article> ，<section> ，<header> ，<footer> ，<form> ， 和更多。
容器提供平等
这 w3-容器 为所有 HTML 容器元素提供相等性：
- 常见边距
- 常见填充
- 常见对齐方式
- 常用字体
- 常见颜色
要使用容器，只需添加 w3-容器 类到任何元素：
要添加颜色，只需添加 w3-颜色 班级：
页眉和页脚
这 w3-容器 类可用于设置标题样式：
标头
W3.CSS 处理的方式没有区别<div>和<header>元素。
这 w3-容器 类可用于设置页脚样式：
许多网页使用<div>元素而不是<header>和<footer>元素。
文章和章节
这 w3-容器 类可以用来设置样式<article>和<section>元素：
例子
<div class="w3-container">
<h2>伦敦</h2>
<p>伦敦是英国人口最多的城市，
大都市区居民超过 900 万。</p>
</div>
<article class="w3-container">
<h2>巴黎</h2>
<p>巴黎地区是欧洲最大的人口中心之一，
人口超过200万。</p>
</article>
<section class="w3-container">
<h2>东京</h2>
<p>东京是首都圈的中心，
也是世界上人口最多的大都市区。</p>
</section>
亲自尝试 »
许多网页使用<div>元素而不是<article>和<section>元素。
网页示例
标头
汽车是一种用于运输的有轮自供电机动车。该术语的大多数定义都规定汽车主要设计用于在道路上行驶。（维基百科）
使用 HTML 的示例<div>元素
<div class="w3-container w3-red">
<h1>标头</h1>
</div>
<img src="img_car.jpg" alt="车" style="width:100%">
<div class="w3-container">
<p>汽车是一种用于运输的有轮自供电机动车。该术语的大多数定义都规定汽车主要设计用于在道路上行驶。（维基百科）</p>
</div>
<div class="w3-container w3-red">
<h5>页脚</h5>
</div>
亲自尝试 »
使用 HTML 语义元素的示例
<header class="w3-container w3-teal">
<h1>标头</h1>
</header>
<img src="img_car.jpg" alt="车" style="width:100%">
<article class="w3-container">
<p>汽车是一种用于运输的有轮自供电机动车。该术语的大多数定义都规定汽车主要设计用于在道路上行驶。（维基百科）</p>
</article>
<footer class="w3-container w3-teal">
<h5>页脚</h5>
</footer>
亲自尝试 »
容器填充
这 w3-容器 类有默认值16像素 有左填充和右填充，没有上填充和下填充：
我没有顶部或底部填充
通常您不必更改容器的默认填充，因为段落和标题提供了模拟填充的边距。
我是标题
我是一个段落。
