【CSS】float してると display:inline でも margin、width、height が効く
問題
display:inline すると width, height が効かないが、float とともに使うと widtht, height, margin が効くようになり、ブロック要素のように使える。
むむっ ほんと？
答え
それはIE対策。
float:left すると
要素は，左に浮動するブロックボックスを生成する。内容は，’clear’特性に従い，上から始まって，ボックスの右側に流し込まれる。値が’none’ではない場合，’display’は無視される。
そう、仕様書どおりに実装されていれば、displayは無視される。
なぜfloatした要素にdisplay:inlineするといいよといわれるのかというと、IEの不具合対策のため。
CSSの仕様どおりならば、floatすると、浮動する（通常の流れから外れた）ボックスを生成する。floatした時点でブロック要素扱いになる。
display:inlineするとよいのはIE対策であって、CSSの仕様ではない。
コメント