　マージンを指定する

■margin:

指定できる値

スタイルシートでの単位指定

数値にptなどの単位をつけて指定する

キーワードで指定

auto

パーセントで指定

値の指定方法		個別に設定するプロパティ
値が一つ	上下左右同じ設定	margin-top	上のみ設定
値が二つ	上下、左右の設定	margin-left	左のみ設定
値が三つ	上と左右と下の設定	margin-right	右のみ設定
値が四つ	上、右、下、左の順で設定	margin-bottom	下のみ設定

marginプロパティを使えば、ボックス周りにマージン(余白）を設定することが出来ます。

ページ全体や段落の左右などに適度に余白を入れて、見やすいページレイアウトにすることが出来ます。

値の指定は、数値にptなどの単位をつけて指定したり、パーセントやキーワードのauto（自動的にマージンを設定）で指定します。

このプロパティも値を複数設定することで、それぞれの方向の余白を設定することが出来ます。また、marinプロパティに「-top」などのキーワードを追加した、margin-topプロパティ(上のマージンのみ設定）を使えば、左右上下それぞれの方向のマージンを個別に設定することが出来ます。

サンプル - Microsoft Internet Explorer

この段落の
上下左右のマージンは、25pxです。

この段落の
上下左右のマージンは、50pxです。

HTML&CSS

<html>
<head>
<title>サンプル</title>
<style type="text/css">
<!--
p      {background-color:orange;}
.test1  { margin: 25px;  }
.test2  { margin: 50px; }
-->
</style>
</head>
<body>
<p class="test1">この段落の<br>
上下左右のマージンは、25pxです。</p>
<hr>
<p class="test2">この段落の<br>
上下左右のマージンは、50pxです。</p>
</body>
</html>

サンプル - Microsoft Internet Explorer

上と下に50px
左と右に20pxのマージンを指定

上に10px、
左右に20px、下に50pxのマージンを指定

左のみに
50pxのマージンを設定

HTML&CSS

<html>
<head>
<title>サンプル</title>
<style type="text/css">
<!--
p     {background-color:orange;}
.test1  { margin: 50px 20px;     }
.test2  { margin: 10px 20px 50px;}
.test3  { margin-left: 50px; }
-->
</style>
</head>
<body>
<p class="test1">上と下に50px<br>
左と右に20pxのマージンを指定</p>
<hr>
<p class="test2">上に10px、<br>
左右に20px、下に50pxのマージンを指定</p>
<hr>
<p class="test3">左のみに<br>
50pxのマージンを設定</p>
</body>
</html>