ある要素内にpaddingが付いてる子要素があったりなかったりする場合に余計なclassを付けないでpaddingを揃える

[下に追記あり / 20100915]
タイトルが意味不明なのはわかってるんだけど、上手くまとめられなかったです。
あと内容はあまり役に立たないと思います。

例えば、aタグをdisplay:block;すると、クリック出来る範囲が広がるのでリンクが押しやすくなってちょっと優しかったり
背景をうまいこと操ってテキストなのにリッチなメニューを作れたりするのでご存知かと思いますが

ある要素内のテキストにaをdisplay:blockしてpaddingで広げる仕様のリンクが入ったり入らなかったりする下のようなhtmlとcssがあった場合,
[html classname=”html-sh”]
<dl>
<dt>dt / リンクなし</dt>
<dd><a href="#">dd / リンクあり</a></dd>
<dt><a href="#">dt / リンクあり</a></dt>
<dd><a href="#">dd / リンクあり</a></dd>
</dl>
[/html]

リンクのないdtにもpaddingをつけてレイアウトを揃えようとして、対策を何もしないと
[css classname=”css-sh”]
dt {
padding:10px;
background:#09c;
}
dt a {
display:block;
padding:10px;
background:#ace;
}
dd a {
display:block;
padding:10px;
background:#f7f7f7;
}
[/css]

dtのpaddingとdt aのpaddingでdt aのレイアウトが揃わない。

理想としてはこうしたいのが心情。

簡単にどうにかする方法がないかなとちょっと考えてみた。

ネガティブマージンを追加すると

まず、一番最初に思いついたのがネガティブマージン。
dt aにmargin:-10px;みたいなのを追加してみると
[css classname=”css-sh”]
dt {
padding:10px;
background:#09c;
}
dt a {
display:block;
padding:10px;
margin:-10px; /* ←追加 */
background:#ace;
}
dd a {
display:block;
padding:10px;
background:#f7f7f7;
}
[/css]

いきなり出来た(blogのcssを上手くリセットできてないのでmarginがちょっとおかしいけど)。

と思ったけど、IE6-7でみたら下記のように全然ダメだった。ちくしょう。

(デタラメに)IE対策してみた

どうせhasLayoutでどうにかなんでしょ？とか適当なノリでzoom:1;を追加したり。
[css classname=”css-sh”]
dt a {
margin:-10px;
/position:relative;/*IE6-7*/
/margin-top:-13px;/*IE6-7 なんかmargin-topに3pxの隙間が出てたから3px多めにした */
}
dd a {
/zoom:1;/*IE6-7 これがないとdt a以下のdd aのdisplay:blockが範囲はあるのに反応しなかった */
}
[/css]

結果

検証ページ-1

上記「IE対策してみた」に不具合があったみたいなので追加+もう一回

よく判らない3pxの隙間を、hack使って無理やり余分なmargin分無かったことにするのっていくら何でも無いよなぁと思っていたら、@ethertankさんからこんなツイートが。
(ソースの不恰好という話とは別な問題で)タブ移動時に表示が崩れる事があるそうな、そんでもってこうゆう風にしたらよくなりますよとわざわざサンプルまで作ってくれました＞＜感謝。
ネガティブマージンによる領域拡張

さっそく参考にさせてもらうと

dt,dd,
dt a,dd a {
/position: relative;
/zoom: 1;
}

親にも指定するのがキモなのかな？余分なmargin指定がなくなってますね。
あとhoverに着色してあるからクリック出来る範囲が広がっているのを分かりやすく確認出来ますわ、うちもこうしておけば良かったのに気がきかなかったなぁ、パクろう。

overflow:hidden

でもってちょっと上で書いたけど前回の無理やりな記述は無いなぁと思っていたので自分なりに別の方法試してみました。

そもそもなんでposition:relative;にしたんだろう？
前々回のネガティブマージンでハミ出した要素がIE6で切れたら。で使ってみたのが頭の隅にあったからかな？
とりあえずこれから離れてみよう。

そうすると次はoverflow:hidden;とかdisplay:inline-block;とかかな、なんとなく。
overflow:hidden;はclearfixの変わりに使えたりするし。

余分なmarginを指定しないように、こんな感じで描いてみた。
検証ページ-2

今度は大丈夫そうだけどどうだろう。
[css classname=”css-sh”]dt {
padding:10px;
}
dt,dd {
/zoom:1; /*IE6-7用*/
/overflow:hidden; /*IE6-7用*/
}
dt a,dd a {
display:block;
padding:10px;
}
dt a {
margin:-10px;
}[/css]

ちなみにhasLayoutはzoomでtrueになるみたいだけど
position: relative;でfalseになるそうな。

hasLayoutメモ | CSS | understandard.net

hasLayoutの値をtrueにする指定

プロパティ	値
display	inline-block
float	left もしくは right
height	any value
position	absolute
width	any value
writing-mode	tb-rl
zoom	any value

hasLayoutの値をfalseにする指定

プロパティ	値
display	block もしくは inline
float	none
height	auto
position	static もしくは relative
width	auto
writing-mode	lr-tb
zoom	normal