構文

margin : 上余白 右余白 下余白 左余白;
margin-top : 余白;
margin-bottom : 余白;
margin-left : 余白;
margin-right : 余白;

説明文

　<dvi>や<p>といったブロック要素に属するタグなどでは、ボックスを作成してその中にタグの要素を記述する。「margin」では、ボックスの外側の余白を指定できる。つまり、隣り合うブロック要素との余白を指定できる。例えば、<p>タグで下側の余白を10pt指定すれば、段落間の余白を確保できる。

　余白の指定には上側の余白を指定する「margin-top」、下側の余白を指定する「margin-bottom」、左側の余白を指定する「margin-left」、右側の余白を指定する「margin-right」が用意されている。また、「margin」ではすべての方向の余白を一度に指定できる（詳しくは同ページの「marginの一括指定」を参照）。

　余白はピクセル数（px），割合（%），文字数（em）で指定できる。

[画像のクリックで拡大表示]

使用例

● CSSの定義

p { margin-bottom : 0.5em; }
div { margin : 10px 10%;
      border : 2px solid #000080;
      background-color : #c0c0ff;
      padding : 0px 10px;
}
div pre { margin-left : 20px;
          margin-right : 20px;
          background-color : #ffffa0;
          font-weight : 700;
}

● HTMLの例

<div>
<p>スタイル・シートの「margin」では余白の設定を行える。隣り合った要素と
指定した余白を取る。例えば，段落同士の余白を指定したり，コラムなど囲む項
目の左右に空白を付けて区別するようにするといったことが行える。</p>
<p>また，余白を取る方法として「margin」以外に「padding」も利用できる。</p>
<div>
<p>marginで余白を設けるには以下のように記述する。</p>
<pre>
<p style="margin:10px;">この要素の上下左右に10pxの余白が空く。</p>
</pre>
</div>

● 表示結果

Internet Explorerの表示例
[画像のクリックで拡大表示]
Firefoxの表示例
[画像のクリックで拡大表示]

marginの一括指定

　「margin-left」など上下左右の余白を個別に指定するほか，「margin」を使うことで一度に余白を指定することが可能だ。「margin」に1つの余白指定をすると上下左右同じ余白が取られる。例えば，

margin : 10px;

と指定すれば，上下左右全ての10pxの余白が取られる。

　また，以下のような記述で，各余白を指定できる。

margin : 全て;
margin : 上下 左右;
margin : 上 左右 下;
margin : 上 右 下 左;

　例えば，以下のように指定すれば，上に10px，下に20px，左右に30pxの余白が取られる。

margin : 10px 30px 20px;

関連項目