float と margin が一緒にあるときは、display:inline; を

これは超ポピュラーなバグの一つですが、divでfloat指定したときmarginを使うとその値が倍になります。

コレの解決方法は、displayの標準値(block)を「inline」にすることで解決されます。

.要素{
	float: left;
	margin: 10px 5px 10px 0x;
	display: inline;
}

意外に忘れちゃうんですよね。あとでIE6で確認してびっくり(゜д゜);

てことになるんですよ。

毎日コーディングばっかりやってればそんなことないのでしょうけど、、、ね。

なので私はエディタに「float と margin」が一緒に存在していた場合は、色を変えて直ぐに気づくように工夫してコーディングしています。

時々このやろ。って思ったりもしますが、ちゃんとCSSハックを使わないようにしてバグ修正していると、コードを短くすることが出来たり、たまーに勉強になるので、それはそれでプラス思考ってやつで乗り切るしかないね。



コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です