W3.CSSマージン
w3-marginクラスは、要素のすべての辺に16pxのマージンを追加します。
W3.CSSマージンクラス
W3.CSSは、次のマージンクラスを提供します。
| クラス | 定義 |
|---|---|
| w3-マージン | 要素のすべての辺に16pxのマージンを追加します |
| w3-マージントップ | 要素に16pxの上マージンを追加します |
| w3-マージン-右 | 要素に16pxの右マージンを追加します |
| w3-マージン-ボトム | 要素に16pxの下マージンを追加します |
| w3-マージン左 | 要素に16pxの左マージンを追加します |
| w3-セクション | 要素に16pxの上下の余白を追加します |
マージン
w3-marginクラスは、要素のすべての辺に16pxのマージンを追加します。
w3-marginクラスは、要素のすべての辺に16pxのマージンを追加します。
例
<div class="w3-container w3-margin">
<p>I have 16px margin on all sides.</p>
</div>
マージントップ
w3-margin-topクラスは、要素に16pxの上部マージンを追加します。
w3-margin-topクラスは、要素に16pxの上部マージンを追加します。
例
<div class="w3-container w3-margin-top">
<p>I have 16px margin on the top.</p>
</div>
マージンボトム
w3-margin-bottomクラスは、要素に16pxの下マージンを追加します。
w3-margin-bottomクラスは、要素に16pxの下マージンを追加します。
例
<div class="w3-container w3-margin-bottom">
<p>I have 16px margin on the bottom.</p>
</div>
マージン左
w3-margin-leftクラスは、要素に16pxの左マージンを追加します。
w3-margin-leftクラスは、要素に16pxの左マージンを追加します。
例
<div class="w3-container w3-margin-left">
<p>I have 16px margin the left.</p>
</div>
マージン右
w3-margin-rightクラスは、要素に16pxの右マージンを追加します。
w3-margin-rightクラスは、要素に16pxの右マージンを追加します。
例
<div class="w3-container w3-margin-right">
<p>I have 16px margin the right.</p>
</div>
セクション
多くのHTML要素には、デフォルトの上マージンまたは下マージンがありません。このような要素は、それらの間にマージンなしで表示されます。
私は憂うつです
私はグリーンです
w3-sectionクラスは、要素を分離するために使用できます。
HTML要素に16pxの上下の余白を追加 します。
私は憂うつです
私はグリーンです
例
<div class="w3-container w3-section w3-blue">
<h1>I am
Blue</h1>
</div>
<div class="w3-container
w3-section
w3-green">
<h1>I am Green</h1>
</div>