margin-top

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

CSSレイアウト実践講座

CSSレイアウト実践講座について

運営者プロフィール

運営者ブログ*

お問い合わせ

margin-top

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

marginは外側4方向の余白を指定するのに対し、margin-topは4辺のうちの上部のみに指定が反映される。(他の1辺のみ指定する場合は、margin-bottom(下)、margin-right(右)、margin-left(左)を利用する。)

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

使用例 - サンプル(A) / サンプル(B)

サンプル(A)

[CSSの記述]

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

[HTMLの記述]

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

[ブラウザ上の表示]

ボックスの外側上部に20pxの余白を指定。
サンプル(B)

[CSSの記述]

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

[HTMLの記述]

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

[ブラウザ上の表示]

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