スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
 |   | 

垂直マージンの相殺

  • 2006/04/21(Fri)
  • カテゴリー:CSS

CSSでレイアウトをしていくと、ボックス要素の指定において、縦方向のmarginがうまく反映されずに困ることがあります。

これは、隣接するボックスの垂直マージンを相殺するという仕様に基づくもののようです。
例として以下のようにソースを書きます。

  1. h1 {
  2.     margin-bottom:15px;
  3. }
  4. p {
  5.     margin-top:10px;
  6. }

この例の(X)HTMLではh1要素の直後にp要素を記述しているものとして考えます。

この場合、h1要素とp要素の間は15pxと10pxを合わせた25pxになると思いがちですが、実際には大きい方の値である15pxしか空きません。

この例で示したような垂直マージンの相殺は、以下のような仕様になっています。

  • 隣接するマージンが互いに正の値の場合、その最大値(二つのうちの値が大きい方)が相殺後のマージン値とされる。
  • 隣接するマージンに正負が混在する場合、双方を足し合わせた値がマージン値とされる。(相殺されない)
  • 隣接するマージンが互いに負の値の場合、その最小値(二つのうちのマイナス値が大きい方)が相殺後のマージン値とされる。

つまり、h1の下方マージンが15px、pの上方マージンが-10pxなら、h1要素とp要素の間は5pxになります。
またh1の下方マージンを-15px、pの上方マージンを-10pxと指定した場合には、-15pxがマージン値とされます。

このことを念頭に置いてレイアウトすれば縦方向の調整で混乱することはなくなると思いますが、そもそもこの垂直マージンの相殺を回避して表示させることは可能なのでしょうか。

これらは、borderやpaddingを隔てずに接する場合、接するmarginの最大値が適用されるというものなのです。

ちなみに、borderやpaddingを隔てた場合は折りたたみの対象にはなりません。今回のようにpx指定ではなく、emなどの相対値を指定しても同様の結果になります。

2nose>CSS Lab.>垂直marginの折りたたみ(margin collapse)

borderやpaddingの指定で相殺を回避できるとのことなので、以下のように指定し直してみます。

  1. h1 {
  2.     margin-bottom:15px;
  3.     border:1px solid #ccc;
  4. }
  5. p {
  6.     margin-top:10px;
  7.     border:1px solid #ccc;
  8. }

垂直マージンの相殺回避の検証サンプル
(サンプルでは便宜上、両ボックスともp要素に置き換えて検証しています)

ところが、うまくマージンの相殺を回避できていません。

borderの代わりにpaddingを指定してみても同様の結果でした。
何か指定の仕方が間違っていたのでしょうか。ちょっとわかりませんんが…

垂直マージンの相殺を回避する方法については、わかり次第改めて書いていこうと思いますが、今回はとりあえず垂直マージンは相殺されるということを念頭に置いてレイアウトを組むことをお勧めしておきます。

スポンサーサイト
CM:1  |  TB:0  | 

<< prev

<< 2006/03

2006/05 >>

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。