margin-bottom

margin-bottomプロパティとは

margin-bottomプロパティを使うと、ボックス下側の余白(マージン領域)の大きさを指定できます。

マージン領域は枠線の外側に設けられるため、下にある要素との間隔を空けることができます。

margin-bottomの定義は、以下のとおりです。

値の説明

以下は、margin-bottomで使える値と説明です。

length

数値と単位で指定します。マイナスも使えます。

percentage

パーセントで指定します。マイナスも使えます。親要素の横幅×パーセントがマージン領域になります。

auto

ブラウザで決定します。

利用例

利用例を示すために、以下のHTMLを使います。

<div class="test1">
テスト１です。
</div>
<div class="test2">
テスト２です。
</div>

margin-bottomの利用例は、以下のとおりです。

.test1 {
  border: solid;
  margin-bottom: 50px;
}

.test2 {
  border:solid;
}

上記は、以下のように表示されます。

2つの要素間は、かなり開いています。

また、以下のようにも使えます。

.test1 {
  border: solid;
  margin-bottom: -10%;
}

.test2 {
  border: solid;
  margin-top: 50px;
}

margin-topは、上側のマージン領域を指定します。50pxなので、先ほどと同じ間隔が空くはずですが、test1側でmargin-bottomをマイナスで指定しています。

上記は、以下のように表示されます。

マイナスで指定した分、間隔が狭くなっています。これは、親要素の横幅(ここではブラウザの横幅)にパーセントを掛けたものになるため、横幅が広いとより間隔は狭くなるか、2つの要素が重なったりします。

ブラウザのサポート状況

各ブラウザの最新バージョンでのサポート状況は、以下のとおりです。

〇

サポート

△

制限あり

×

未サポート

？

不明

IE

Internet Explorer

Ed

Edge

Fx

Firefox

Ch

Chrome

Sa

Safari

Op

Opera

An

Android Browser

Sm

Samsung Internet

※スマートフォンのFirefoxとChromeは、Android版です。