もしかしたらmarginとpaddingを理解してなかった件

メニューをカスタマイズしていて、
横幅を指定してボックスにするか
余白を指定してボックス風に見せるか
悩んで試行錯誤してました。

横幅をwidthで指定すれば、文字数に関係なくすべて同じ幅でメニューが並んでキレイなんですが、一行に表示できるメニューの文字数や数が限られてしまいます。
余白をmarginやpaddingで指定すれば、各メニューの間が均等に空くので、これもキレイといえばキレイです。
左詰めにしてると右に余白が出ますけどね。
メニュー
今後のことを考えて余白を指定する方向で行こうかと思いまして、marginを指定しました。
空いたなーと思ったら…マウスオーバーが文字幅だけ。
それはちょっとキレイじゃないのでpaddingに変えたら、余白も一緒にマウスオーバーしてくれました。
メニュー
単純なミスです。

でも今までmarginとpaddingを間違えたことがなかった気がしたので、運営しているHTMLサイトのソースを確認したら…
position:relativeとabsoluteを使って、box位置を指定して余白を作ってました。
何でこんな面倒なことを?と思って当時を思い返したら、IE6対策でした。
IE6がwidthを理解しないから極力使わないようにしてたんですね、当時の私は。
縦幅だけはコンテンツによって長くなるので…と割り切って上下だけpaddingを指定していたり。
角丸デザインもIEじゃ意味ないから…と諦めた記憶も思い出されました。

それでおさらいを兼ねてmarginとpaddinでググッたら
marginの相殺に関する記事が出てきて、思わぬところでここ最近のナゾが解けました。
[CSS]マージンとパディングの使い分けをおさらい | コリス
paddingとmargin相殺 – テーマ開発ドキュメント
相殺するんですね。
だから指定したとおりに空かなかったりするんですね。
ひとつ勉強になりました。

ちなみにHTMLサイトではメニューを画像に置き換えてfloat:leftで左からキッチリ並べていたので、margin:0が指定されてました。
これもマウスオーバーで文字色と背景を変化させたかったけれど、IE6対策が面倒で画像に置き換えたという事情があります。
ソースを少し書き足せばいいだけだと思うでしょうが
画像を使えばブラウザによっては表示されない色も使い放題だよなー
と思ったんです。

とりあえずIE6爆発しろ

スポンサードリンク
Pocket
LINEで送る

Bookmark the permalink.

コメントを残す

メールアドレスが公開されることはありません。

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

  • スポンサードリンク