10. ボックスモデル(マージン)

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

マージン幅のプロパティ

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

マージン幅の設定

margin-topプロパティ、margin-bottomプロパティ

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

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

<マージン幅>」の具体的に指定する値は次に示すとおりである。

<長さ>
マージン幅をemやexなどの単位付き数値で指定する。負の数値を指定することも可能である。
<%値>
マージン幅を包含ブロックの横幅に対する割合で指定する。負の数値を指定することも可能である。
auto
"margin-top"あるいは"margin-bottom"の指定値が"auto"の場合、 その計算値は0となる。

margin-leftプロパティ、margin-rightプロパティ

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

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

<マージン幅>」の具体的に指定する値は次に示すとおりである。

<長さ>
マージン幅をemやexなどの単位付き数値で指定する。負の数値を指定することも可能である。
<%値>
マージン幅を包含ブロックの横幅に対する割合で指定する。負の数値を指定することも可能である。
auto
主な計算方法を以下に示す。
  • "margin-left"および"margin-right"の指定値が共に"auto"の場合、共に計算値は等しくなる。
  • "margin-left"、"margin-right"、"width"のうち1つだけが"auto"の場合、 その計算値は下記の式で計算される(※ ボーダーの種類が"none"ならばボーダー幅は0となる。)
    包含ブロックの横幅
        = 'margin-left' + 'border-left-width' + 'padding-left'
        + 'width'
        + 'padding-right' + 'border-right-width' + 'margin-right'
    

marginプロパティ

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

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

<マージン幅>」の具体的に指定する値は次に示すとおりである。

<長さ>
マージン幅をemやexなどの単位付き数値で指定する。負の数値を指定することも可能である。
<%値>
マージン幅を包含ブロックの横幅に対する割合で指定する。負の数値を指定することも可能である。
auto
主な計算方法を以下に示す。
  • "margin-left"および"margin-right"の指定値が共に"auto"の場合、共に計算値は等しくなる。
  • "margin-left"、"margin-right"、"width"のうち1つだけが"auto"の場合、 その計算値は下記の式で計算される(※ ボーダーの種類が"none"ならばボーダー幅は0となる。)
    包含ブロックの横幅
        = 'margin-left' + 'border-left-width' + 'padding-left'
        + 'width'
        + 'padding-right' + 'border-right-width' + 'margin-right'
    

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

  • マージン幅が「1つだけ指定」されている場合は、「上下左右のマージン幅」が指定された値で等しく設定される。 つぎの例の場合、上下左右のマージンが等しく"1em"に設定される。
    p { margin: 1em }
    
  • マージン幅が「2つ指定」されている場合は、最初に指定された値で「上下マージン」を、2番目に指定された値で「左右マージン」を等しく設定する。 つぎの例の場合、上下マージンがそれぞれ"1em"、左右マージンがそれぞれ"2em"に設定される。
    p { margin: 1em 2em }
    
  • マージン幅が「3つ指定」されている場合は、最初に指定された値で「上マージン」を、2番目に指定された値で「左右マージン」を等しく、 3番目に指定された値で「下マージン」を設定する。 つぎの例の場合、上マージンが"1em"、左右マージンがそれぞれ"2em"、下マージンが"3em"に設定される。
    p { margin: 1em 2em 3em }
    
  • マージン幅が「4つ指定」されている場合は、最初に指定された値で「上マージン」を、2番目に指定された値で「右マージン」を、 3番目に指定された値で「下マージン」を、4番目に指定された値で「左マージン」をそれぞれ設定する。 つぎの例の場合、上マージンが"1em"、右マージンがそれぞれ"2em"、下マージンが"3em"、 左マージンが"4em"に設定される。
    p { margin: 1em 2em 3em 4em }
    

ページの先頭に戻る


Copyright c 2006-2007 御隠居 (滄洲). All Rights Reserved.