パソコンQ&A

floatされた領域のmarginが2倍になる

floatした領域に左右のマージンを付けると、指定した値の2倍のmarginが発生する。

対象ブラウザ

Windows
Internet Explorer5
Internet Explorer6

回避方法

floatしている領域にdisplay:inlineを付ける。
また仕様に準拠したブラウザに、display:inlineを付けると影響はないのかという点ですが、 CSS2の仕様では「floatを指定した要素はdisplayの指定を無視する」というのがありますので、 FirefoxやOperaではdisplayの指定を無視します。
注意点としてはdisplay:inlineの指定をfloatより前に書くことが必要らしいが、これはデマかも[要確認] (下の例ではstyle属性ですが、floatのほうが先です)

marginではなくpaddingを使用するという方法もあります。
floatの親要素に対してpaddingを指定すると回避できますが、WindowsIE5,6の場合、ボックスモデルの解釈の違いがありますので注意してください。
[参考記事] ボックスの幅や高さの解釈が違う

display:inlineでの回避例

ただしマージンについては左右のみのバグであって、上下は仕様どおりです。

関連プロパティ

float左または右に寄せて配置する
marginマージンに関する指定をまとめて行う
margin-left左マージンを指定する
margin-right右マージンを指定する


主要ブラウザに非対応

このページはリンクフリーです。設定などは自己責任で…
Copy Right kikky

kikky.net