margin

CSSプロパティ「margin」の解説とサンプル。

外側の余白の値を指定するプロパティ。

値を複数指定することで、辺ごとに異なる線種にすることができる。

値×1 ＝ 4辺全てに適用
値×2 ＝上下／左右で適用
値×3 ＝上／左右／下で適用
値×4 ＝上／右／下／左で適用

1辺のみに適用させたい場合は、margin-top（上）、margin-bottom（下）、margin-left（左）、margin-right（右）を使用する。

pxで指定	指定したい幅をpxで指定する。この場合、ディスプレイの大きさに左右されず、指定した部分の幅が固定される。
％で指定	親ボックスに対する割合で指定する。この場合、親ボックスの幅により、指定した部分の幅が変動する。

[CSSの記述]

.sampleA { border:solid 1px #cc0000; margin:20px; }

[HTMLの記述]

<p class="sampleA">テキストテキスト</p>

[ブラウザ上の表示]

ボックスの外側4方向に20pxの余白を指定。

[CSSの記述]

.sampleB { border:solid 1px #cc0000; margin:0 10%; }

[HTMLの記述]

<p class="sampleB">テキストテキスト</p>

[ブラウザ上の表示]

ボックスの外側の左右に10%の余白を指定。

CSSレイアウト実践講座カテゴリ