margin、paddingとは?:CSS入門

ブログが作りたい!CSS入門 > margin、paddingとは?:CSS入門

margin、paddingとは?:CSS入門

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」を境にして、外側の余白と、内側の余白を指定することができるのです。

margin、paddingの図解

分かり難いですか?それでは、もう少し具体的にしてみましょう。

例えば、大見出し(<h1>タグ)と、文章(<p>タグ)が並んでいるとすると、margin、paddingは、次のようになります。

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の初期化」 »

コメントありがとうございます。

お手数ですが、コメント前に留意事項をご覧くださいませ。

また、現在ご質問にお答えする余裕がない状態にあります。よろしくお願いいたします。

助けてください

URLのページは、現在当方が制作しているページなのですが、上から5分の1あたりにある

「No.244 エンテイ かざんポケモン
ほえると かざんが ふんかする。みなぎる ちからを おさえきれず みちという みちを かけめぐる。(『金』より)」

という部分を引用部分として枠でくくったのですが、なぜか上下に間(恐らくpaddingかと…)が空いてしまってしっくりきません。

どうしたらいいのでしょうか?

一応、何らかの関係がありそうな部分を張り付けておきます。


* {
margin : 0 ;
padding : 0 ;
}

blockquote {
margin:5px;
padding:5px;
background:#f0f0f0; /* 背景 */
border:#cccccc 1px solid; /* 枠線 */
border-left:#cccccc 5px solid; /* 枠線(左) */
}


早めのご回答お願いします。

引用のすき間について

motokiさん、こんにちは!( ・∀・)ノ
コメントありがとうございます。

おっしゃる通り、次の箇所が原因かと思います。
> 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の部分だったので、Kuma Crowさんのおっしゃる「0 5px」という値をpaddingに代入して、以下のように書き換えました。

blockquote {
margin:5px;
padding:0 5px;
background:#f0f0f0; /* 背景 */
border:#cccccc 1px solid; /* 枠線 */
border-left:#cccccc 5px solid; /* 枠線(左) */
}

それでも、paddingの部分が上下1行分ぐらい空いてしまってますよね。

どうしたらいいのでしょうか。
ご教授願いますm(_ _)m



言葉で表現しにくいので、メールにて図を送っておきます。

引用内のすき間について

motokiさん、こんにちは!( ・∀・)ノ
コメントありがとうございます。

あぁ、上下って外側じゃなくて内側のお話だったのですね。

それならば、motokiさんが修正した箇所の他に、
もう一つ原因となる箇所があります。


スタイルシート(70b79.css)の中に、次のような記述があります。

+----+----+----+----+----+----+----+----+----+----+
p {
margin: 1em 0;
}
+----+----+----+----+----+----+----+----+----+----+

ここで、pタグにmarginが入っているため、
paddingの修正だけでは、効果が見られなかったのだと思います。


引用のblockquoteタグの構造が、次のようになっていますよね。

+----+----+----+----+----+----+----+----+----+----+
<blockquote><p>~</p></blockquote>
+----+----+----+----+----+----+----+----+----+----+

blockquoteタグによる内側へのすき間と、
pタグによる外側へのすき間が効いています。


それでどうするのか?となると、
pタグに関するmarginの設定は他の箇所では意味をもつので、

blockquote内だけ上書きして打ち消すことになるかと思います。
次のようなコードを追加してあげればいいんじゃないかしら。

+----+----+----+----+----+----+----+----+----+----+
blockquote p { margin: 0; }
+----+----+----+----+----+----+----+----+----+----+


以上、うまくいかないようでしたら、
お手数ですがまた改めてコメントしてくださいませ。

コメントの投稿

内緒のときは、チェックしてください。

トラックバック

http://kumacrow.blog111.fc2.com/tb.php/269-8d23c092
 | トップページ | 

FC2ブログの作り方・作成

GIMP2で画像を編集しよう

イラストが描ける Inkscape

初心者のためのSEO対策

Google Analytics入門

アクセス解析QLOOK

アイデアの作り方

超ビギナー向けHTML入門

超ビギナー向けのCSS入門

FC2ブログのカスタマイズ

初心者向けのCSS小技

Web制作に役立つ本

ブログでお小遣い稼ぎ

これはうまい!

誰にでも才能はあるのです

RSSフィード

プロフィール

KumaCrow(クマクロ)

KumaCrow

FC2ブログによるブログの作り方をご紹介しています。「初心者の人にも分かりやすく!」がモットーです。

Twitter KumaCrow

リンクフリー♪
フォローも、ふりっふり~

伝わる文章を書くコツ

最近の記事

最近のコメント

パソコン入門

アクセスの多かった記事

先月アクセスが多かった記事を、ご紹介します。

【1位】
GIMP2の使い方
【2位】
プリントスクリーンの方法
【3位】
GIMP2 パスの使い方
【4位】
GIMPとは?
【5位】
レイヤーとは?

初心者のデジカメ撮影術

ホームページ制作にJimdo

このブログの評価

自分を見つめなおす

ブログランキング

クリックしちゃいなよ!You、クリックしちゃいなよ!そして、Canして、Doしちゃいなよ!

FC2ブログランキングに参加してみませんか?見に来てくれる人が少しだけ増える・・・かもしれません。

FC2カウンター

ブログ開始(2007年7月)から、ユニークユーザ数が「のべ240万人」に達しました。いつもご覧いただきまして、ありがとうございます。(2011/01/05、FC2カウンター故障・データ消失により、10万人分くらいマイナスとなりました)

子どもの教育

最近のトラックバック

+++ お友達のブログ・お世話になっているサイトさま +++

ふわふわふわりん
無料ウェブ素材 Tyto-Style
海外のSEO対策・SEOツールをわかりやすく解説するブログ
日南商工会議所による情報化支援ブログ
気になるけど
聞き捨てならん!!
かちびと.net
ありのごとくあつまりて