【margin-top】上のマージン(余白)を指定

各marginの位置(ボックスの構造)

margin-topプロパティでは、上のマージン(余白)を個別に指定することができます。 マージンには負の値も指定することができ、親ボックスから飛び出して表示させる事もできます。

※これについてはネガティブマージンを参照下さい。

また上下に隣接するブロックレベル同士のマージンは、相殺され大きい方のマージンだけが設定されます(小さい方のマージンの値は設定されません)。 これをマージンの相殺と呼び、下記のような決まりがあります

  • どちらも正の値の場合は、大きい方の値が設定される
  • 正と負の値の場合は、両方を足した値が設定される
  • どちらも負の値の場合は、小さい方の値が設定される

なお左右のマージンは相殺されません。詳しくはマージンの相殺を参照下さい

書式

  • margin-top : ……… 上のマージンを指定

★:数値、パーセント、auto、inherit

実数+単位
数値にpxなどの単位を付けてマージンを指定します。ただしページボックスに対しては、em、exなどの単位を使う事はできません。
パーセント値+%
このボックスを含む親ボックス(包含ブロック)の横幅に対する割合でマージンを指定します。上のマージンでも高さではなく横幅が参照されます。(ページボックスの場合は、ページボックスの高さに対する割合となる)
auto
状況に応じて自動的にマージンが調整されます。ただしインライン要素の上下左右、ブロックレベル要素の上下のマージンの場合は「0」となります。

使用した時の例

.sample1 {margin-top: 40px;}

div{background:#DFF2FF;}
<div class="sample1">上のマージン:40px</div>

ブラウザ上の表示例

上のマージン:40px

対応ブラウザなどのデータ

初期値 0 値の継承 継承しない
適用可能な要素 すべての要素(tr,th,td,thead,tbody,tfoot,col,colgroupを除く)
メディア visual
対応ブラウザ Internet Explorer3~ , Google Chrome1~ , Firefox1~ , Opera3.5~ , Safari1~

関連情報