2009年08月10日

marginとpadding その2

こんにちは。島津です。

前回『margin』『padding』プロパティの基本をご紹介しました。
本日は『margin』プロパティについて、もう少し詳しいお話をします。

とりあえず今回は、押さえておいた方がいいものとして
この2つについてご説明します。
 

floatと同じ方向にmarginを設定するときの注意

IE6の有名なバグで、float使用時に同じ方向にmarginを指定すると
marginの幅が指定値の倍になってしまいます。

▼スクリーンショット
   
※左がWindows IE6、右がWindows FireFox3.0のものです。
(htmlコーディング)
<div class="outer">
  <p class="inner">50px</p>
  <div class="clear">&nbsp;</div>
</div>
(cssサンプル)
.outer {

width:150px;
background-color:#BCD8DA;

}
.inner {

float:left;
width:50px;
margin:5px 0 5px 50px;
background-color:#96C1C5;
font-size:12px;
text-align:center;

}
かと言って、IE6のために倍になるのを見越して半分の値を指定すると
他のブラウザで見たときに余白が狭くなってしまいますね。
これを回避したい場合、例えば以下のような方法があります。

▼スクリーンショット
   
※左がWindows IE6、右がWindows FireFox3.0のものです。
(htmlコーディング)
<div class="outer">
  <p class="inner">50px</p>
  <div class="clear">&nbsp;</div>
</div>
(cssサンプル)
.outer {

width:100px;
padding-left:50px;
background-color:#BCD8DA;

}
p {

float:left;
width:50px;
margin:5px 0;
background-color:#96C1C5;
font-size:12px;
text-align:center;

}
内側の要素の左marginで空けていた余白を、外側の要素の左paddingに変更しました。
これならIE6でも他のブラウザでも、同じ表示結果になります。
 

要素のmargin同士がぶつかるとどうなるか

上側の要素に下マージン10px、下側の要素に上マージン10pxが
設定されていた場合、2つの要素の間隔は何pxになるでしょうか?

▼スクリーンショット
   
※左がWindows IE6、右がWindows FireFox3.0のものです。
(htmlコーディング)
<div>
  <h3>ブロック1</h3>
  <p>第一段落のテキスト第一段落のテキスト第一段落のテキスト。</p>
  <p>第二段落のテキスト第二段落のテキスト第二段落のテキスト。</p>
  <p>第三段落のテキスト第三段落のテキスト第三段落のテキスト。</p>
</div>
<div>
  <h3>ブロック2</h3>
  <p>第一段落のテキスト第一段落のテキスト第一段落のテキスト。</p>
  <p>第二段落のテキスト第二段落のテキスト第二段落のテキスト。</p>
  <p>第三段落のテキスト第三段落のテキスト第三段落のテキスト。</p>
</div>
(cssサンプル)
div {

margin:10px 0 0 0;
width:200px;
font-size:12px;

}
h3 {

background-color:#FFE6D9;
margin:0;

}
p {

border:dashed 1px #DDDDDD;
margin:0 0 10px 0;
padding:0;

}
Pタグの下マージン10px + DIVタグの上マージン10px = 20px
…とはなりません。

marginはあくまで他の要素本体に対する距離を指定するもので、
他の要素のmargin領域に対しては効きません。
ですので、margin同士がぶつかった場合、結果的には小さい方が無視され
数値の大きい方が優先されます。

※FireFox2.0、FireFox3.0、Windows Safari3で確認済。
※ただし、IEでは例外的に、margin同士が重ならず加算した値分だけ
 余白が空くようです。(キャプチャ参照)

両方の要素の余白を合算させたいなら、例えば以下のような方法があります。
▼スクリーンショット
   
※左がWindows IE6、右がWindows FireFox3.0のものです。
(htmlコーディング)
<div>
  <h3>ブロック1</h3>
  <p>第一段落のテキスト第一段落のテキスト第一段落のテキスト。</p>
  <p>第二段落のテキスト第二段落のテキスト第二段落のテキスト。</p>
  <p>第三段落のテキスト第三段落のテキスト第三段落のテキスト。</p>
</div>
<div>
  <h3>ブロック2</h3>
  <p>第一段落のテキスト第一段落のテキスト第一段落のテキスト。</p>
  <p>第二段落のテキスト第二段落のテキスト第二段落のテキスト。</p>
  <p>第三段落のテキスト第三段落のテキスト第三段落のテキスト。</p>
</div>
(cssサンプル)
div {

margin:10px 0 0 0;
width:200px;
font-size:12px;

}
h3 {

background-color:#FFE6D9;
margin:0;

}
p {

border:dashed 1px #DDDDDD;
margin:0;
padding:0 0 10px 0;

}
この例では、上側の要素の下余白にmarginではなくpaddingを使っています。
paddingは内側の余白なので要素本体の一部ということになり、
Pタグの下余白を活かしながらもブロック間にまとまった余白が出来ました。

こんなふうに、marginだけでどうもうまくいかなくなったときは
paddingも併用してみるとうまくいくことがあります。
いろいろ試してみましょう。


次回はもう片方の『padding』プロパティについて、
もう少し詳しくお話したいと思います。

HTML5&CSS3の最新情報はこちら → HTML5GOGO

posted by baba at 21:03 | Comment(0) | TrackBack(0) | 情報
この記事へのコメント

この記事へのトラックバック
 
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。