margin

要素に対して、外側の余白を指定します。上下左右の余白を個別、または、まとめて指定することができます。

ブラウザ

IE3 / IE4 / IE5 / IE5.5 / IE6 / N4 / N6 / N7 / O6 / O7 / O9 / Fx1 / Fx2 / IE5 mac

書式

・「上下左右」を指定

要素[.class名][#id名]{ margin : 値; }

・「上下左右」を指定

要素[.class名][#id名]{ margin : 値 値; }

・「上左右下」を指定

要素[.class名][#id名]{ margin : 値 値 値; }

・「上右下左」を指定

要素[.class名][#id名]{ margin : 値 値 値 値; }

▲PageTop

指定できる値

値	初期値	意味
数値+単位		マージンの大きさを指定します。単位例：px,em,ex,%
auto		ブラウザーに依存します。一般的なブラウザーでは、センタリングするように調整されるようです。
inherit		親要素の値を継承します。

▲PageTop

サンプル

ソースコード

<html>
  <head>
    <title>サンプルコード</title>
    <style type="text/css">
      #sample1 {
        border : solid 1px #999999;
        width : 30%;
        }
        #sample2 {
        margin : 100px;
        border : solid 1px #999999;
        width : 30%;
      }
      #sample3 {
        margin : 100px 70px;
        border : solid 1px #999999;
        width : 30%;
      }
      #sample4 {
        margin : 100px 70px 40px;
        border : solid 1px #999999;
        width : 30%;
      }
      #sample5 {
        margin : 100px 70px 40px 10px;
        border : solid 1px #999999;
        width : 30%;
      }
      #sample6 {
        margin : auto;
        border : solid 1px #999999;
        width : 30%;
      }
    </style>
  </head>
  <body>
    <div id="sample1">通常のBOX</div>
    <div id="sample2">margin : 100px</div>
    <div id="sample3">margin : 100px 70px</div>
    <div id="sample4">margin : 100px 70px 40px</div>
    <div id="sample5">margin : 100px 70px 40px 10px</div>
    <div id="sample6">margin : auto</div>
  </body>
</html>

表示結果

通常のBOX

margin : 100px

margin : 100px 70px

margin : 100px 70px 40px

margin : 100px 70px 40px 10px

margin : auto

▲PageTop

margin

ブラウザ

書式

指定できる値

サンプル

ソースコード

表示結果

関連項目

CSS