margin、paddingとは？：CSS入門
CSS入門（7）
間隔（余白）をあけたいときは、CSSの「margin、padding」を使います。でも、margin、paddingって何だろう？ややこしそうだぞぅ。
今回は、イメージしやすいように、margin、paddingの説明から入ります。お話は、次の順番で進みます。
margin、paddingとは？
1：margin、paddingの意味
margin（マージン）、padding（パディング）は、簡単に言うと、次のような意味になります。
margin | 外側の余白 |
|---|---|
padding | 内側の余白 |
・・・と言われても、何のことだか、まるで分からないと思います。
2：margin、paddingを図解
まるで分からないと思うので図解します。margin、paddingは、次のように「border」を境にして、外側の余白と、内側の余白を指定することができるのです。
分かり難いですか？それでは、もう少し具体的にしてみましょう。
例えば、大見出し（<h1>タグ）と、文章（<p>タグ）が並んでいるとすると、margin、paddingは、次のようになります。
記事「グループ化 【<div>タグ】：HTML入門」でも少しお話しましたが、ブロックレベルのタグは、このようにそれぞれのタグが箱の中に入っているようなイメージになります。
つまり、marginという大きめの箱に、paddingという小さめの箱を入れて、さらに、そのpadding箱に、中身となるタグを入れるようなイメージです。
ひとつのページであれば、それらの大きめの箱が、ギュウギュウとひしめき合っている状態といえます。
なぜ余白が2つ（margin、padding）も必要なのか？
しかし、なぜmarginと、paddingに分けて、余白を指定する必要があるのでしょうか？ねぇ？
それは、borderの存在を念頭において考えれば分かり良いはずです。
例えば、paddingが世の中に存在しなかったら、どうなるでしょうか？・・・そうです。文字にborderの罫線がびったりくっついた形になってしまいます。
あるいは、marginが世の中に存在しなかったら、どうなるでしょう？・・・そうです。各タグの罫線が重なって、罫線としての役割は制限されます。
borderを境にした、外側の余白（margin）と、内側の余白（padding）の必要性が、ご理解いただけたかと思います。
次回予告
次回は、margin、paddingの初期化について書いています。長くなってしまったので、margin、paddingは、3回に分けてお送りします。
関連記事
CSSに関連する記事を、ご紹介します。
1：カスタマイズ前
2：CSSの基本的なこと
3：色の指定
4：罫線の指定
5：間隔（余白）の指定
6：継承と子孫セレクタ
7：箇条書き（リスト）
8：文字（フォント）の指定
9：idセレクタ、classセレクタ
10：文章を読みやすくする
11：文字の中央揃え（センタリング）
12：レイアウト
13：tableの中央揃え（センタリング）
14：CSSで飾る
15：まとめ
作成日：2008/04/17 更新日：2008/04/17
« 「罫線を描く【border】」｜「margin、paddingの初期化」 »
コメントありがとうございます。
現在、コメントさんも、お休みしています。
トラックバック
http://kumacrow.blog111.fc2.com/tb.php/269-8d23c092
