			カンタン！ブログをはじめよう

HOME > Blog カスタマイズ > パディングとマージン

パディングとマージン

2006年03月18日 AQ

『ボックスと要素』の関連記事となります。先に説明したボックスを構成するものの中に、今回説明するパディングとマージンがあります。

CSS （スタイルシート）を覗いているとやたら出てくるので、もうみなさんお馴染みの記号ではないでしょうか

どちらともボックスの中の要素（テキスト、画像など）に " 余白 " を与えるものなのですが、微妙に使われる役割が違います。

まずパディングとマージンの位置関係を構成する図を見てみましょう。

まん中の

が要素（テキスト）です。通常この要素には見えない枠がこのように囲っています。

この要素にパディングやマージン、ボーダーなどで指定をし、どの部分にその影響があるかを表しているのが上の図です。具体的に表にまとめて違いを見てみましょう。見えない枠の位置がボーダーの位置とすると・・・
　

マージン（ margin ）	パディング（ padding ）
枠の外側に存在する	枠の内側に存在する
負の値（マイナス指定）が指定できる	最低値が 0 （ゼロ）で、それ以上の値しか指定できない
条件によっては、指定した値よりも表示が小さくなる場合がある	いかなる場合でも、指定された数値の余白を作る
長さ（ px、pt、em ）と％で指定する	長さ（ px、pt、em ）と％で指定する
値（数値）に auto の指定ができる	auto の指定はできない
■ CSS 指定方法 margin-top: 指定数値 ; margin-right: 指定数値 ; margin-bottom: 指定数値 ; margin-left: 指定数値 ;	■ CSS 指定方法 padding-top: 指定数値 ; padding-right: 指定数値 ; padding-bottom: 指定数値 ; padding-left: 指定数値 ;

マージンのマイナス指定ができるというのは、こういう事です。

あ～れ～！

これを不思議と思っている方は結構いたみたいです。

何の事は無い、小波のぶら下がっている画像のマージンの上に、マイナスの数値を指定することで、ライブドアのマークを囲んでいるグレーの罫線（ bottom border ）に重なり合うようにしているだけです。

これで小波が一生懸命、一番下のグレーの線につかまっている様子を表しました。普通は重なり合わないように気を使いますが、これは逆転の発想を用いた例ですね。

それでは最後に、パディングとマージンを指定する時の、使用定義を説明しておきます。上記の表にある CSS の指定方法が基本なんですが、マージンもパディングも短縮して記載設定することができます。

マージンを例に取ると・・・

margin: 5px; と指定すると、全方向（上下左右） 5px 外側に余白ができます。同じように以下のように短縮できます。

margin: 全方向（上下左右）; （１つ値を設定）
margin: 上下左右; （２つ値を設定）
margin: 上左右下; （３つ値を設定）
margin: 上右下左; （４つ値を設定）

パディングの設定（指定）も同じです。値と値の間は、必ず半角のスペースを入れて下さい。

コメント欄の部分で、投稿日付や投稿者の名前と、書き込んでいただいたコメントが引っ付きすぎて、ものすごく狭苦しく見えるブログを良く目にします。CSS （スタイルシート）の設定で、マージンやパディングを調整して、見映え良くしてはいかがでしょうか

■ 引用参考サイト

Academic HTML > 3.7 マージンとパディング

TOP

Comments(9)

TrackBack(0)

Blog カスタマイズ

tags : パディングマージンボックス margin padding

1. Posted by とらねこ 2006年08月21日 04:51

こんばんは！おや、ここコメント欄がゼロですね。
残暑厳しい折、お元気にしておられますでしょうか？
私は暑くて夏バテしてしまいました。
昼夜逆転で、仕事中は死人のようになっております[ギョロ目]

なんだか食欲も沸かないのですよ・・・早く、涼しくなるといいなあ・・・なんて、思っております。
夜寝て、夜中に起き出してしまいました。

挨拶が長くなり相すみませんです。
ところで・・・
自分ではおそらく最後のカスタマイズ（予定）をいたしました。
今まで“続きを読む”とarticle-tags、その後のmain_continues、さらにその下のline-bottomがギッシリ詰まっていて、大変みずらくなっていたのですが・・・（ご存知かどうかは別として）　　＜続く＞

2. Posted by とらねこ 2006年08月21日 05:08

本当はarticle_tagsとその下のmain-continuesの行間を空けるのに、article_tagsの下paddingで設定しても出来ず、（pxとem指定、両方で試したのですが）main-continuesの上paddingでやったら出来ました・・・なぜなのだろう・・・[ゲソッ]

ちなみに今見たら、さっきのコメ、ハイフンとアンダーバー間違って入力しましたがCSSでは間違ってませんです・・・すみません。

ところでＭ床さん、「ぐちゃぐちゃになるのを覚悟で適当にCSSカスタマイズ～[アイタ]って、おっしゃってましたが＞Ｍ床さん床で
私いつもですし、CSSもよく分かってませんが何か。

＞子猫さん
これ見てくれてるかなあ・・・
お元気ですか？夏休みはゆっくり過ごされましたか？
ブログそんなに急がなくていいですから、また遊びに来てね[ハート]
お待ちしていま～す。にゃ～ん。

3. Posted by 子猫 2006年08月21日 07:03

皆様こんにちは…！
なかなかＰＣの前には座れないけど、とらねこちゃんの呼び掛けにカキコして行きます。ではまた。

4. Posted by AQ 2006年08月21日 23:30

＞とらねこさん
>>1
何か思い出したようにご丁寧な挨拶ありがとうございますｗｗ

でっ・・・このコメントは挨拶なのですか [？]
質問なんですか [？] 正直よくわからないんですけど～ [汗汗]
もしかしたら、酔ってます (･･?)

>>2
[blockquote]本当は article_tags とその下の main-continues の行間を空けるのに、article_tags の下 padding で設定しても出来ず、（ px と em 指定、両方で試したのですが） main-continuesの上 padding でやったら出来ました・・・なぜなのだろう・・・[/blockquote]
これが質問なのかな... ただの独り言 [汗タラー]

[blockquote]ところでＭ床さん・・・[/blockquote]
これ、ボクにじゃないですよね [？]
Ｍ床さんに語ってるんですよね・・・
ダメ (+_+) わからない。まさに、とらねこワールド [もっとorz...]

5. Posted by AQ 2006年08月21日 23:32

＞子猫さん・・・ (^_^;)
>>3
・・・なんか、愛想無いよね [汗汗]
ちょっと、つまんないですぅ (´；ω；｀)ｳｯ…

6. Posted by とらねこ 2006年08月22日 04:14

えーん、ごめんなさい。分かりずらくて・・・・。
出直して来ます・・・[もっとorz...]

7. Posted by AQ 2006年08月23日 01:26

＞とらねこさん・・・ (^_^;)
>>6
ん。お願いしますｗｗ

8. Posted by のりぴー 2007年01月30日 16:27

亀レスです。自分のブログがなんとか治りました！！。[ウインク]

9. Posted by AQ 2007年01月30日 21:19

＞のりぴーさん
>>8
治ったの？良かったね、頑張ったかいがありましたね (^^)

ところで、今のりぴーさんが利用しているテンプレートが、この Pet Lovers Only♪ のデザインのベースになっているんですよ [ハナ歌♪]

そのデザインからここまで改造してきました [ウインク]