余白（マージン）をまとめて指定しましょう！（margin プロパティ）

使用プロパティセレクタ { margin: 長さ; }

CSS一覧プロパティ辞典 … margin プロパティ

margin プロパティを使うと、要素の上下左右のマージン（余白）をまとめて指定できます。値には余白の長さを1～4個指定できます。

marginプロパティの値の詳細

値	値の効果
長さを１個指定	上下左右のマージンの長さになる。「margin: 1em;」と指定すると、上下左右のマージンが１文字分になります。
長さを２個指定	一つ目の値が上下、二つ目の値が左右の長さになります。「margin: 1em 2em;」と指定すると、上下のマージンが１文字分になり、左右のマージンが２文字分になります。
長さを３個指定	一つ目の値が上、二つ目の値が左右、三つ目の値が下の長さになります。「margin: 1em 2em 3em;」と指定すると、上のマージンが１文字分になり、左右のマージンが２文字分になり、下のマージンが３文字分になります。
長さを４個指定	一つ目の値が上、二つ目の値が右、三つ目の値が下、四つ目の値が左の長さになります。「margin: 1em 2em 3em 4em;」と指定すると、上のマージンが１文字分になり、右のマージンが２文字分になり、下のマージンが３文字分になり、左のマージンが４文字分になります。

覚え方があります！

margin プロパティの値のようにCSSで上下左右を表すときは、上、右、下、左、のように時計回りになります。このことを覚えておくと値を入力するときに迷わずにすみますよ！

使用例

margin プロパティを使用し、p 要素の上下左右に余白を入れてみましょう！

記述例
<html> <head> <title>一人暮らしの前向き料理</title> <style type="text/css"> body { background-color: moccasin; } h1 { background-color: orange; } span{ font-weight: bold; } p { margin: 3em;} p.copy { font-family: "ＭＳＰ明朝",serif; } </style> </head> <body> <h1>簡単に作れるワンポイント料理</h1> <p>料理を少しおいしくするための<br> ワンポインを紹介します！</p> <p>おいしいチャーハンの作り方</p> <p class="copy">Copyright © 2007 TomMY. All Rights Reserved.</p> </body> </html>

使用例の表示

[marginプロパティ適応前のブラウザでの表示例]
一人暮らしの前向きな料理
簡単に作れるワンポイント料理料理を少しおいしくするためのワンポイントを紹介します！おいしいチャーハンの作り方 Copyright © 2007 TomMY. All Rights Reserved.

[marginプロパティ適応後のブラウザでの表示例]
一人暮らしの前向きな料理
簡単に作れるワンポイント料理料理を少しおいしくするためのワンポイントを紹介します！おいしいチャーハンの作り方 Copyright © 2007 TomMY. All Rights Reserved.

二つの p 要素の上下左右に「3em」の長さを指定しています。[margin プロパティ適応後のブラウザでの表示例]を見て「何か変だな？」と思われた方はいませんか？ではその疑問は下の「MEMO」を見ればスッキリするはずです！

上下のマージンは打ち消されます！（下の図参照）

[margin プロパティ適応後のブラウザでの表示例]を見ると、上の p 要素と下の p 要素でそれぞれ３文字分（3em）の余白が指定されているはずです。ということは上の p 要素と下の p 要素の余白が適応されれば６文字分「6em」になりそうですよね？そう思うのが自然です。それなのに、３文字分しか上下の余白が取られていないのは、上下二つのマージンのうち長いほうが実際の余白になるからです。上の例の場合は、両方それぞれの余白が３文字分（3em）ですので、片方が相殺されて余白は三文字分（3em）です。