余白を設定したDIV内のタイトル要素だけ余白を無視させる

2008年6月19日 18:16

カテゴリごととか、コンテンツごととか、DIVでひとくくりにして決まったレイアウトで並べていく、というのはよくあると思います。

その中で、ひとつのDIV内にh1要素やP要素、UL要素などが混在していると思います。
そのDIVに全体の余白を設定するケースもよくあると思います。

しかし、h1要素などのタイトル部分には余白を設定したくない、という状況も結構あるのではないでしょうか。（俺だけかな・・）
まぁサンプルを見るのが一番早いので↓こんな感じ。

サンプルタイトル

サンプル文章、サンプル文章、サンプル文章、サンプル文章、サンプル文章。
サンプル文章、サンプル文章、サンプル文章、サンプル文章、サンプル文章。
サンプル文章、サンプル文章、サンプル文章、サンプル文章、サンプル文章。
サンプル文章、サンプル文章、サンプル文章、サンプル文章、サンプル文章。
サンプル文章、サンプル文章、サンプル文章、サンプル文章、サンプル文章。
サンプル文章、サンプル文章、サンプル文章、サンプル文章、サンプル文章。

ぱっと見はわかりづらいかもしれませんが、全体を囲うDIVにpaddingを設定し、タイトル部分だけネガティブマージンで相殺しています。
これに気付く前は、そのDIVからタイトル要素だけを外に出して…みたいなことをやってました。
が、コンテンツが増えていくとソースが見づらい上に編集もなんだかめんどくさい。

で、ネガティブマージンで解決できるだろうってことに気づいて適用してみたものの、なぜかIEでは見た目的には余白が消えたものの、なぜか反対の余白がまだ残っているらしく、親ボックスのDIVの幅が伸びる。
さらにIEの「幅が勝手に伸びる」というバグも手伝って、floatしているレイアウトの場合なんかはカラム落ちまでする始末。

なので、しばらくこの方法を封印していたのですが、なんと反対側の部分にもネガティブマージンを設定するときれいに余白が消えることを発見！（当たり前かもしれませんが、気づかなかった・・）
なのでメモ的にエントリーを書いてみました。ソースは以下から。

▼EntryMore▼