中・上級向け：ネガティブマージンの思わぬ使い道

またまた今月号のweb creators10月号からちょっと面白い記事を見つけたので。

ネガティブマージンについてですが、おそらくあまり使ったことがないという人が大半だと思います。実際に私もそうです。

読んでいる掲載元がよく分からなかったのでスルーしかけたのですが、再度じっくり読んで発想の転換のような考え方で――。

では早速。



.box{

border:solid 1px #000;

padding:20px;

zoom:1;

}

.box h3{

background:#00ccff;

margin:-20px -20px 1em;

padding:0.3em 20px;

}

これははじめにボックスに対して指定し、あとから見出しに対して再指定しているところにあります。
つまりボックスに対してpadding:20px;があるので、その入れ子のh3に対してもpadding:20px;が効いています。
そこでh3に対しては幅いっぱいに見出しをとりたい場合、逆にpadding:20px;は必要ないので、margin:-20px -20px 1em;を指定しています。このmarginの二つ目の値が重要です。これでボックスいっぱいに見出しが拡張しました。

これで一応完成ですが、見出しの見栄えをもう少し整えたいということでh3にpadding:0.3em 20px;を指定。

なるほどな〜と思いつつ、多分使わないけど目から鱗ですね。