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

2008年6月19日 18:16

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

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

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

サンプルタイトル

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

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

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

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

▼EntryMore▼

CSSソース

HTMLソース

今回のポイントは3点。
DIV内の余白を無視させたい要素(サンプルではタイトル)に、DIVの左右に設定したpaddingの数値分、タイトルの左右のmarginにマイナスに設定します。(ネガティブマージン)

Firefoxなどのモダンブラウザは、左側のみで十分なのですが、なぜかIEは6、7、さらには互換モード、準拠モードともに左右両方に設定しないとダメでした。

さらに、これは解決できなかった問題ですがDIVにpadding-topを指定すると、なぜかネガティブマージンがキャンセルされるようです。(見た目的に。padding-topを指定した瞬間、marginを指定していないのと同じ位置にタイトルが移動した)

なので、タイトルとコンテンツとの余白は、タイトルに指定したmargin-bottomで対応しています。

トラックバックURL

http://css-eblog.com/cgi-bin/mt/mt-tb.cgi/83

トラックバック

ネガティブマージンを使ってレイアウトしてみる

↑の画像のようなレイアウトってよく使われていると思うですが、こういうレイアウトをネガティブマージンを使う事でソース上も綺麗に収まりますし、使いけっこう使...

byCSS Lecture 2008年7月 2日 10:54

コメントを投稿





承認されるまでコメントは表示されません。しばらくお待まちください。