W3.CSS 容器
這是我的標題
這是我的文章
這篇文章是淺灰色，文字是棕色。這篇文章是淺灰色，文字是棕色。這篇文章是淺灰色，文字是棕色。這篇文章是淺灰色，文字是棕色。這篇文章是淺灰色，文字是棕色。
這是我的頁尾
容器類
w3-container 類為任何 HTML 元素添加了 16px 的左內邊距和右內邊距。
w3-container 類是所有 HTML 容器元素（如
<div>、<article>、<section>、<header>、<footer>、<form> 等）的理想類。
容器提供平等
w3-container 為所有 HTML 容器元素提供平等
- 通用外邊距
- 通用內邊距
- 通用對齊方式
- 通用字型
- 通用顏色
要使用容器，只需將 w3-container 類新增到任何元素即可
要新增顏色，只需新增一個 w3-顏色 類
標題和頁尾
w3-container 類可用於設定標題的樣式
Header
W3.CSS 對 <div> 和 <header> 元素的處理方式沒有區別。
w3-container 類可用於設定頁尾的樣式
許多網頁使用 <div> 元素而不是 <header> 和 <footer> 元素。
文章和章節
w3-container 類可用於設定 <article> 和 <section> 元素的樣式
示例
<div class="w3-container">
<h2>倫敦</h2>
<p>倫敦是英國人口最多的城市，</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> 元素。
網頁示例
Header
汽車是一種帶輪子的、自給動力的機動車輛，用於交通運輸。該術語的大多數定義規定，汽車主要設計用於在道路上行駛。（維基百科）
使用 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-container 類預設有 16px 的左內邊距和右內邊距，沒有上內邊距或下內邊距。
我沒有上內邊距或下內邊距
通常，您不必更改容器的預設內邊距，因為段落和標題提供的外邊距可以模擬內邊距。
我是一個標題
我是一個段落。
