ホームページの基礎（2. CSS 編）

2.10 ボックスモデル（マージン）

このページでは，ボックスモデルにおけるマージン幅に関するプロパティについて説明します。

2.10.1 マージン幅のプロパティ

マージン幅を設定するプロパティには，「margin-top（上マージン）」，「margin-bottom（下マージン）」，「margin-left（左マージン）」，「margin-right（右マージン）」およびこれら４種類のプロパティの 一括指定を行う簡略記法の「margin」があります。

CSS総目次 | ページ先頭に戻る

2.10.2 margin-topプロパティ，margin-bottomプロパティ

「margin-topプロパティ」は上マージンの幅，「margin-bottomプロパティ」は下マージンの幅を指定します。 その書式は以下のとおりです。

margin-top，margin-bottomプロパティ
値	<マージン幅> | inherit
初期値	0
適用対象	すべての要素（テーブル内部要素（行，列類およびセル）は除外する）
継承	しない
パーセント値	包含ブロックの横幅に対する割合

<マージン幅>に指定する値は次に示すとおりです。

<長さ>

マージン幅をemやexなどの単位付き数値で指定します。負の数値を指定することも可能です。

<％値>

マージン幅を包含ブロックの横幅に対する比率で指定します。負の数値を指定することも可能です。

auto

"margin-top"あるいは"margin-bottom"の指定値がキーワード「auto」の場合は，その計算値は０となります。

CSS総目次 | ページ先頭に戻る

2.10.3 margin-leftプロパティ，margin-rightプロパティ

「margin-leftプロパティ」は左マージンの幅，「margin-rightプロパティ」は右マージンの幅を指定します。その書式は以下のとおりです。

margin-left，margin-rightプロパティ
値	<マージン幅> | inherit
初期値	0
適用対象	すべての要素（テーブル内部要素（行，列類およびセル）は除外する）
継承	しない
パーセント値	包含ブロックの横幅に対する割合

<マージン幅>に指定する値は次に示すとおりです。

<長さ>

マージン幅をemやexなどの単位付き数値で指定します。負の数値を指定することも可能です。

<％値>

マージン幅を包含ブロックの横幅に対する比率で指定します。負の数値を指定することも可能です。

auto

キーワード「auto」を指定した場合の必要となる主な計算方法を以下に示しておきます。

1. "margin-left"および"margin-right"の指定値が共に"auto"の場合，共にその計算値は等しくなります。
2. "margin-left"，"margin-right"，"width"のうち１つだけが"auto"の場合，その計算値は下記の式で計算されます(※ ただし，ボーダーの種類が"none"の場合はボーダー幅は０となります。)。

   包含ブロックの横幅
       = 'margin-left' + 'border-left-width' + 'padding-left'
       + 'width'
       + 'padding-right' + 'border-right-width' + 'margin-right'

CSS総目次 | ページ先頭に戻る

2.10.4 marginプロパティ

「marginプロパティ」は上下左右のマージンの幅を一括して指定します。その書式は以下のとおりです。

marginプロパティ
値	<マージン幅>{1,4} | inherit
初期値	個別のプロパティを参照する
適用対象	すべての要素（テーブル内部要素（行，列類およびセル）は除外する）
継承	しない
パーセント値	包含ブロックの横幅に対する割合

<マージン幅>に指定する値は次に示すとおりです。

<長さ>

マージン幅をemやexなどの単位付き数値で指定します。負の数値を指定することも可能です。

<％値>

マージン幅を包含ブロックの横幅に対する比率で指定します。負の数値を指定することも可能です。

auto

キーワード「auto」を指定した場合の必要となる主な計算方法を以下に示しておきます。

1. "margin-left"および"margin-right"の指定値が共に"auto"の場合，共に計算値は等しくなります。
2. "margin-left"，"margin-right"，"width"のうち１つだけが"auto"の場合，その計算値は下記の式で計算されます(※ ただし，ボーダーの種類が"none"の場合はボーダー幅は０となります。)。

   包含ブロックの横幅
       = 'margin-left' + 'border-left-width' + 'padding-left'
       + 'width'
       + 'padding-right' + 'border-right-width' + 'margin-right'

marginプロパティでは，マージン幅の指定が１つの場合から４つの場合まで４種類あります。それぞれの指定個数により指定されるマージンが変化します。

• マージン幅が「１つだけ指定」されている場合は，「上下左右のマージン幅」が指定された値で等しく設定されます。つぎの例の場合，上下左右のマージンが等しく"1em"に設定されます。

  p { margin: 1em }

• マージン幅が「２つ指定」されている場合は，最初に指定された値で「上下マージン」を等しく，２番目に指定された値で「左右マージン」を等しく設定します。つぎの例の場合，上下マージンがそれぞれ"1em"，左右マージンがそれぞれ"2em"に設定されます。

  p { margin: 1em 2em }

• マージン幅が「３つ指定」されている場合は，最初に指定された値で「上マージン」を，２番目に指定された値で「左右マージン」を等しく， ３番目に指定された値で「下マージン」を設定します。つぎの例の場合，上マージンが"1em"，左右マージンがそれぞれ"2em"，下マージンが"3em"に設定されます。

  p { margin: 1em 2em 3em }

• マージン幅が「４つ指定」されている場合は，最初に指定された値で「上マージン」を，２番目に指定された値で「右マージン」を， ３番目に指定された値で「下マージン」を，４番目に指定された値で「左マージン」をそれぞれ設定します。 つぎの例の場合，上マージンが"1em"，右マージンが"2em"，下マージンが"3em"， 左マージンが"4em"に設定されます。

  p { margin: 1em 2em 3em 4em }

CSS総目次 | ページ先頭に戻る