Title

marginとは

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

margin

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

目次に戻る

marginプロパティの概要

このプロパティは、要素の外周にある余白の幅を設定することができます。

要素の余白には、境界線に接する外側の余白と内側の余白があり、このmarginプロパティは、外側の余白を設定します。 内側の余白を設定する場合は、paddingプロパティを使用します。

外側の余白とは要素の境界線よりも外側にある余白領域のことで背景が透明なので空間的にしか認識することができません。

目次に戻る

構文

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

セレクター{
	margin: 四辺値;
	margin: 上下辺値 左右辺値;
	margin: 上辺値 左右辺値 下辺値;
	margin: 上辺値 右辺値 下辺値 左辺値;
}

目次に戻る

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

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

初期値: 0

marginの初期値は「0」ゼロです。つまり外側の余白が無い状態が初期値になるということです。

div{margin: 0;}

目次に戻る

キーワード値: auto

autoキーワード値を使うとブラウザが適切なマージンを選択します。 おおよその場合は四方の余白を均等に設定する為、要素を中央構えにすることができます。

div{
	width: 50%;
	margin: auto;
}

目次に戻る

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

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

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

div{
	margin: 10px;
}

目次に戻る

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

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

div{
	margin: 10px;
}

div{
	margin: 5%;
}

目次に戻る

個別指定: 上下左右の余白を別々に設定する

このプロパティは設定値を半角スペースで区切りながら指定することで上下左右の 余白を個別に設定することができます。この書き方には、いくつかのバリエーションが存在しますので、 まず構文から見ていきましょう。

セレクタ{
	margin: 上下値 左右値;
	margin: 上値 左右値 下値;
	margin: 上値 右値 下値 左値;
}

それでは実際の検証です。上記の構文の4行目を使って上下左右を個別に設定していきます。 この個別の値には数値とキーワードの両方を含めることが可能です。

div{
	width: 50%;
	margin: 5px auto 20px auto;
}

目次に戻る

marginの個別プロパティを使用する

このmarginプロパティには上下左右のうち、一つの余白のみを設定するための個別プロパティが存在します。 以下の四つが個別プロパティです。

セレクタ{
	margin-top: 上値;
	margin-bottom: 下値;
	margin-left: 左値;
	margin-right: 右値;
}

また、一般的に使われることは少ないと思いますが、上記コードと同種のプロパティとして下記のプロパティもリストしておきます。 使用方法は同じです。

• margin-block-start: 上値;
• margin-block-end: 下値;
• margin-inline-start: 左値;
• margin-inline-end: 右値;

目次に戻る

グローバル値

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

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

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

目次に戻る

補足説明

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

目次に戻る

まとめ

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

margin: auto;

margin: 3% auto 2em auto;

margin: auto 2em;

margin-top: 10px;

margin-bottom: 10px;

margin-left: 10px;

目次に戻る