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の初期化」 »
コメントありがとうございます。
お手数ですが、コメント前に留意事項をご覧くださいませ。
また、現在ご質問にお答えする余裕がない状態にあります。よろしくお願いいたします。
助けてください
引用のすき間について
コメントありがとうございます。
おっしゃる通り、次の箇所が原因かと思います。
> blockquote {
> margin:5px;
> padding:5px;
> background:#f0f0f0; /* 背景 */
> border:#cccccc 1px solid; /* 枠線 */
> border-left:#cccccc 5px solid; /* 枠線(左) */
> }
それで、どこを変更したら良いのか？というと、
「margin:5px;」のところです。
上下のすき間が不要ということであれば、
「margin:0 5px;」と変更してみてください。
試してみて、左側のすき間もいらなかったかな～という場合は、
「margin-right:5px;」と変更してみてください。
あるいは、引用に関する周囲のすき間はいらないようなら、
「margin:5px;」を削除してみてください。
以上、いろいろお試しになってみて、うまくいかないようでしたら、
お手数ですがまた改めてコメントしてください。
No title
また、メールでお知らせくださいましてありがとうございました。
やはり、要らないのはmarginではなく、paddingの部分だったので、Ｋｕｍａ Ｃｒｏｗさんのおっしゃる「0 5px」という値をpaddingに代入して、以下のように書き換えました。
blockquote {
margin:5px;
padding:0 5px;
background:#f0f0f0; /* 背景 */
border:#cccccc 1px solid; /* 枠線 */
border-left:#cccccc 5px solid; /* 枠線(左) */
}
それでも、paddingの部分が上下１行分ぐらい空いてしまってますよね。
どうしたらいいのでしょうか。
ご教授願いますm(_ _)m
言葉で表現しにくいので、メールにて図を送っておきます。
引用内のすき間について
コメントありがとうございます。
あぁ、上下って外側じゃなくて内側のお話だったのですね。
それならば、motokiさんが修正した箇所の他に、
もう一つ原因となる箇所があります。
スタイルシート（70b79.css）の中に、次のような記述があります。
+----+----+----+----+----+----+----+----+----+----+
p {
margin: 1em 0;
}
+----+----+----+----+----+----+----+----+----+----+
ここで、pタグにmarginが入っているため、
paddingの修正だけでは、効果が見られなかったのだと思います。
引用のblockquoteタグの構造が、次のようになっていますよね。
+----+----+----+----+----+----+----+----+----+----+
<blockquote><p>～</p></blockquote>
+----+----+----+----+----+----+----+----+----+----+
blockquoteタグによる内側へのすき間と、
pタグによる外側へのすき間が効いています。
それでどうするのか？となると、
pタグに関するmarginの設定は他の箇所では意味をもつので、
blockquote内だけ上書きして打ち消すことになるかと思います。
次のようなコードを追加してあげればいいんじゃないかしら。
+----+----+----+----+----+----+----+----+----+----+
blockquote p { margin: 0; }
+----+----+----+----+----+----+----+----+----+----+
以上、うまくいかないようでしたら、
お手数ですがまた改めてコメントしてくださいませ。
「Ｎｏ．２４４ エンテイ かざんポケモン
ほえると かざんが ふんかする。みなぎる ちからを おさえきれず みちという みちを かけめぐる。（『金』より）」
という部分を引用部分として枠でくくったのですが、なぜか上下に間（恐らくpaddingかと…）が空いてしまってしっくりきません。
どうしたらいいのでしょうか？
一応、何らかの関係がありそうな部分を張り付けておきます。
* {
margin : 0 ;
padding : 0 ;
}
blockquote {
margin:5px;
padding:5px;
background:#f0f0f0; /* 背景 */
border:#cccccc 1px solid; /* 枠線 */
border-left:#cccccc 5px solid; /* 枠線(左) */
}
早めのご回答お願いします。