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

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

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

マージンを指定する方法は、数値、auto、%などがありますが、%で指定する場合は、そのボックスを含むボックスの横幅に対する割合となります。 margin-bottom(上下のマージンについても)ですが、高さではなく横幅が参照されますので、気を付けて下さい。

また上下に隣接するボックス同士のマージンは、相殺されて大きい方のマージンのみが設定されます(小さい方は無視される)。 これをマージンの相殺と呼びますが、下のようなルールに沿った表示となります。

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

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

書式

  • margin-bottom : ……… 下のマージン(余白)を指定

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

数値+単位
数値にpxなどの単位をつけてマージンを指定する。
パーセント値+%
包含ブロックの横幅に対する割合でマージンを指定する。下のマージン(margin-bottom)の場合でも、高さに対しての割合ではないので注意。
auto
マージンが自動的に調整される。ただしインライン要素の上下左右、ブロックレベル要素の上下のマージンは「0」となる。

使用した時の例

.sample1 {margin-bottom: 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~

関連情報