カテゴリごととか、コンテンツごととか、DIVでひとくくりにして決まったレイアウトで並べていく、というのはよくあると思います。
その中で、ひとつのDIV内にh1要素やP要素、UL要素などが混在していると思います。
そのDIVに全体の余白を設定するケースもよくあると思います。
しかし、h1要素などのタイトル部分には余白を設定したくない、という状況も結構あるのではないでしょうか。（俺だけかな・・）
まぁサンプルを見るのが一番早いので↓こんな感じ。
サンプルタイトル
サンプル文章、サンプル文章、サンプル文章、サンプル文章、サンプル文章。
サンプル文章、サンプル文章、サンプル文章、サンプル文章、サンプル文章。
サンプル文章、サンプル文章、サンプル文章、サンプル文章、サンプル文章。
サンプル文章、サンプル文章、サンプル文章、サンプル文章、サンプル文章。
サンプル文章、サンプル文章、サンプル文章、サンプル文章、サンプル文章。
サンプル文章、サンプル文章、サンプル文章、サンプル文章、サンプル文章。
ぱっと見はわかりづらいかもしれませんが、全体を囲うDIVにpaddingを設定し、タイトル部分だけネガティブマージンで相殺しています。
これに気付く前は、そのDIVからタイトル要素だけを外に出して…みたいなことをやってました。
が、コンテンツが増えていくとソースが見づらい上に編集もなんだかめんどくさい。
で、ネガティブマージンで解決できるだろうってことに気づいて適用してみたものの、なぜかIEでは見た目的には余白が消えたものの、なぜか反対の余白がまだ残っているらしく、親ボックスのDIVの幅が伸びる。
さらにIEの「幅が勝手に伸びる」というバグも手伝って、floatしているレイアウトの場合なんかはカラム落ちまでする始末。
なので、しばらくこの方法を封印していたのですが、なんと反対側の部分にもネガティブマージンを設定するときれいに余白が消えることを発見！（当たり前かもしれませんが、気づかなかった・・）
なのでメモ的にエントリーを書いてみました。ソースは以下から。
©2008 CSS-EBLOG. All Rights Reserved
