容器類
W3的容器類是最重要W3.CSS類。
W3的容器類是用於所有類型的HTML容器元素像：
<DIV>，<標題>，<頁腳>，<文>，<節>，<BLOCKQUOTE>，<FORM>，等等。
這個頭是綠色的。
這頁腳是紅色的。
這篇文章是淺灰色和文字是棕色的。
容器提供平等
W3的容器類是提供平等的重要：
- 通用利潤率
- 常見的墊
- 常見的垂直對齊
- 常見的平面路線
- 常用字體
- 常見的顏色
例
<div class="w3-container">
<p>London is the most populous city in the United Kingdom.</p>
</div>
試一試» 要添加顏色，只需添加一個w3- 顏色類：
例
<div class="w3-container w3-red">
<p>London is the most populous city in the United Kingdom.</p>
</div>
試一試» 頁眉和頁腳
W3的容器類可用於樣式的標題：
標題1
W3的容器類可用於設計頁腳：
例
<footer class="w3-container w3-teal">
<h5>Footer</h5>
<p>Footer information goes here</p>
</footer>
試一試» 文章和章節
W3的容器類可以用來風格的<article>和<section>元素是：
例
<article class="w3-container">
<h1>London</h1>
<p>London
is the most populous city in the United Kingdom,
with a
metropolitan area of over 13 million inhabitants.</p>
</article>
<section class="w3-container">
<h1>London</h1>
<p>London
is the most populous city in the United Kingdom,
with a
metropolitan area of over 13 million inhabitants.</p>
</section>
<div class="w3-container">
<h1>London</h1>
<p>London
is the most populous city in the United Kingdom,
with a
metropolitan area of over 13 million inhabitants.</p>
</div> 試一試»  | 許多網頁使用的<section>元素<div>元素而不是<文>和。 |
|---|
注意，面板和行情
W3的容器類可以用來顯示各種注意事項：
例
<div class="w3-container w3-pale-blue w3-leftbar w3-border-blue">
<p>London
is the most populous city in the United Kingdom,
with a
metropolitan area of over 13 million inhabitants.</p>
</div> 試一試» W3的容器類可以用來顯示各種面板：
倫敦是英國的首都城市。 它是英國人口最多的城市，擁有超過13萬居民的大都市區。
例
<div class="w3-container w3-light-grey w3-border">
<p>London is the
most populous city in the United Kingdom,
with a metropolitan area
of over 13 million inhabitants.</p>
</div> 試一試» W3的容器類可以用來顯示各種報價：
例
<div class="w3-container w3-leftbar w3-light-grey">
<p><i>"Make it as simple as possible, but not simpler."</i></p>
<p>Albert Einstein</p>
</div>
試一試» 轉至章W3.CSS邊框以了解更多有關票據顯示，面板和報價。
組合
頭
一輛車是用於運輸的輪式，自供電的機動車。 該術語的最定義指定汽車被設計為在道路上行駛為主運行。 （維基百科）
使用HTML <div>元素的例子
<div class="w3-container w3-red">
<h1>Header</h1>
</div>
<img src="img_car.jpg" alt="Car" style="width:100%">
<div
class="w3-container">
<p>A car is a wheeled, self-powered motor vehicle used for transportation.
Most definitions of the term specify that cars are designed to run primarily on roads. (Wikipedia)</p>
</div>
<div class="w3-container
w3-red">
<h5>Footer</h5>
</div> 試一試» 使用HTML語義元素示例
<header class="w3-container w3-red">
<h1>Header</h1>
</header>
<img src="img_car.jpg" alt="Car" style="width:100%">
<article
class="w3-container">
<p>A car is a wheeled, self-powered motor vehicle used for transportation.
Most definitions of the term specify that cars are designed to run primarily on roads. (Wikipedia)</p>
</article>
<footer class="w3-container
w3-red">
<h5>Footer</h5>
</footer> 試一試» 集裝箱填充
W3的容器類有留下了默認的16像素和右填充，沒有頂部或底部填充：
我沒有頂部或底部填充
通常你不會有改變容器的默認填充，因為段落和標題提供的利潤率，它將模擬填充。
我標題1
我是一個段落。
集裝箱切片
W3的容器類沒有默認的頂部或底部邊緣。
兩個容器將顯示wothout它們之間的邊距：
我標題1
我是一個段落。
我標題1
我是一個段落。
的W3-部分類可以用於分離容器。 它有16像素的頂部和底部邊距：
我標題1
我是一個段落。
我標題1
我是一個段落。
例
<div class="w3-container w3-section w3-blue">
<h1>I am Heading 1</h1>
<p>I am a paragraph.</p>
</div>
<div class="w3-container w3-section
w3-green">
<h1>I am Heading 1</h1>
<p>I am a paragraph.</p>
</div>
試一試» 隱藏（關閉）集裝箱
隱藏或關閉一個容器很簡單：
×
要關閉此容器，請點擊右上角的X.
例
<div class="w3-container w3-red">
<span class="w3-closebtn" onclick="this.parentElement.style.display='none'">X</span>
<p>To close this container, click on the X in the upper right corner.</p>
</div>
試一試» 打開集裝箱
打開密閉的容器非常簡單：
例
<div id="id01"class="w3-container w3-margin-top w3-green" style="display:none">
<span onclick="this.parentElement.style.display='none'"
class="w3-closebtn">X</span>
<p>London is the capital city of
England.
It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.</p>
</div>
試一試»