ユーティリティクラス
W3.CSSのほとんどは、パディング、マージン、サイズ、および位置を提供するユーティリティクラスを中心に構築されています。
パディングクラス
W3-padding- サイズクラスは、任意のHTML要素にパディングを追加します。
W3-パディングジャンボクラスは32PX上部と底部と64px左右を追加します。
W3-パディング-xxlargeクラスはは24px上部と底部と48px左右を追加します。
W3-パディング - XLARGEクラスは16pxに、トップとボトムと32PX左右を追加します。
W3-パディング-大きなクラスは12ピクセル上部と底部とは24px、左右を追加します。
W3-パディング媒体クラスは8px上部と底部とに16px、左右を追加します。
W3-パディング-小さなクラスは4PX上部と下部と左8pxと右を追加します。
W3-パディング-小さなクラスは、2ピクセル上部と下部と左4PXと右を追加します。
例
<div class="w3-container w3-padding-xlarge">
<p>I have 16px top and bottom padding and 32px left and right padding.</p>
</div>
»それを自分で試してみてください W3-パディングhor- 数クラスの任意のHTML要素に横（上部および下部）のパディングを追加します。
W3-パディング-HOR-4クラスが4PX上下のパディングを追加します。
W3-パディング-HOR-8クラスが8px上下のパディングを追加します。
W3-パディング-HOR-16クラスは16pxに上下のパディングを追加します。
W3-パディング-HOR-32クラスが32PX上下のパディングを追加します。
W3-パディング-HOR-64クラスは64px上下のパディングを追加します。
例
<div class="w3-container w3-padding-hor-16">
I have 16px top and bottom padding
</div>
»それを自分で試してみてください W3-パディングバージョ数クラスは、任意のHTML要素に垂直（左と右）パディングを追加します。
W3-パディング-VER-4クラスが4PX左右のパディングを追加します。
W3-パディング-VER-8クラスが8px左右のパディングを追加します。
W3-パディング-VER-16クラスが16倍速、左右のパディングを追加します。
W3-パディングが-VER-32クラスが32PX左右のパディングを追加します。
W3-パディング-HOR-48クラスは64px、左右のパディングを追加します。
例
<div class="w3-container w3-padding-ver-16">
<p>I have 16px left and right padding</p>
</div>
»それを自分で試してみてください マージンクラス
W3-マージンクラスは、要素に余白を追加します。
W3-マージンクラスは、要素のすべての側面にに16pxの余白を追加します。
W3-マージン下のクラスは要素にに16px下余白を追加します。
W3-のmargin-leftクラスは、要素にマージンを残したに16pxを追加します。
W3-マージン右クラスは、要素に16pxに右マージンを追加します。
W3-マージントップクラスの要素に16pxに上マージンを追加します。
サイジングクラス
w3- サイズクラスは、要素のフォントサイズを変更します。
私は小さな（W3-小さな使用して）います
私は（W3-小を使用して）小さいです
私はメディアです。 デフォルト。
私は（W3-大を使用して）大です
私は（W3-XLARGEを使用して）XLARGEよ
例
<p class="w3-small">I'm small (using w3-small)</p>
<p>I'm medium. The default.</p>
<p class="w3-large">I'm
large (using w3-large)</p>
<p class="w3-xlarge">I'm xlarge (using
w3-xlarge)</p> »それを自分で試してみてください あなたは章の中でクラスのサイジングの詳細読むことができますW3.CSSタイポグラフィを 。
丸めクラス
W3-ラウンドサイズクラスは、要素に丸め境界線を追加します。
例
<div class="w3-round w3-teal w3-padding">Round</div>
<div class="w3-round-large w3-teal w3-padding">Rounder</div>
<div class="w3-round-xlarge w3-teal w3-padding">Rounder</div>
<div class="w3-round-jumbo w3-teal w3-padding">Roundest</div>
»それを自分で試してみてください サークルクラス
センタークラス
W3-センタークラスは、要素を中心に：
例
<div class="w3-container w3-center w3-green">
<img
class="w3-circle"
src="img_car.jpg" alt="Car">
</div> »それを自分で試してみてください フローティングクラス
W3-左のクラスは、左の要素を浮遊し、W3-右のクラスが右に要素を浮遊します：
例
<div class="w3-container w3-light-grey">
<div class="w3-left
w3-red">Float left</div>
<div class="w3-right w3-blue">Float
right</div>
</div> »それを自分で試してみてください 表示/非表示のクラス
W3-隠す小|中|大クラスは、特定の画面サイズ上の要素を非表示にします。
注：それがどのように動作するかを理解するために、ブラウザウィンドウのサイズを変更：
例
<p class="w3-hide-small">I will be hidden on small screens (phone)</p>
<p class="w3-hide-medium">I will be hidden on medium screens (tablet)</p>
<p class="w3-hide-large">I will be hidden
on large screens (laptop/desktop)</p> »それを自分で試してみてください