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

カテゴリ:CSS小技 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 で対応しています。

この記事のカテゴリー一覧を見る⇒CSS小技

  • このエントリーをはてなブックマークに追加

トラックバックURL

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

トラックバック

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

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

byCSS Lecture 2008年7月 2日 10:54