Title

margin-bottomとは

margin-bottom とは次の意味を持つCSSのプロパティです。

margin

読み: マージン
意味: 用紙の余白

bottom

読み: ボトム
意味: 下側

目次に戻る

margin-bottomプロパティの概要

このプロパティは、要素の下辺に接する外側の余白の幅を設定できます。

要素の余白には、境界線の外側にある余白と内側にある余白があり、 このmargin-bottomは、境界線の下辺部に接した外側の余白のみを設定できる個別プロパティとなります。

目次に戻る

構文

サンプルを見る前に構文を確認しておきます。このプロパティの記述は以下のような書き方になります。

セレクター{margin-bottom: 設定値}

目次に戻る

実機サンプルとサンプルコード

このページのサンプルではdiv要素を使用しています。

要素の外側の余白は、要素の境界線よりも外側にある余白領域のことで背景は透明なので空間的に認識することしかできません。 したがって、このサンプルでは余白が見えやすいように親要素には赤色の境界線を設定をしています。

初期値: 0

margin-bottomの初期値は「0」ゼロです。つまり下辺の外側の余白は無い状態になります。

div{margin-bottom: 0;}

目次に戻る

キーワード値: auto

autoキーワード値を使うとブラウザが適切なマージンを選択して表示されます。 しかし多くのブラウザでは0として扱われます。

div{
	margin-bottom: auto;
}

目次に戻る

数値: 単位付き数値で余白を設定する

数値でマージンを設定する場合には、単位付きの絶対値や相対値を使って余白を設定する方法があります。

単位や絶対値、相対値については CSSの単位について のページを参照してください。

div{
	margin-bottom: 10px;
}

目次に戻る

パーセンテージ値: パーセントで余白を設定する

パーセンテージ値を使用した場合、親要素の 横幅(width) に対するパーセンテージを指定したことになります。

div{
	margin-bottom: 5%;
}

目次に戻る

グローバル値

margin-bottomプロパティに対してのグローバルキーワードは以下の3つです。 ただし、このキーワードはブラウザによっては、完全に機能するかは分かりません。

• inheritは親要素の値の継承を促します。
• initialは値を初期値の0に戻します。
• unsetは継承の初期値に戻します。
  ※このプロパティは親要素の値を継承しないのが基本なので、initialと同じ働きをします。

div{margin-bottom: グローバル値;}

目次に戻る

補足説明

• table,table-caption,inline-table 以外の表のdisplay種別を除くすべての要素に適用可能
• 親要素の値を継承しない

目次に戻る

まとめ

ここでは、検証としてブロック要素とインライン要素に同じCSSを設定した場合の適用状態が確認できます。 コードの部分をクリックすると、サンプルにCSSが反映されます。

margin-bottom: 0;

margin-bottom: auto;

margin-bottom: 5px;

margin-bottom: 10px;

margin-bottom: 20%;

目次に戻る