display:inlineの中にdisplay:blockを置くとどうなるか

Pocket

display:inline
の中に
display:block
を含めた時の挙動です

結論

非常に複雑な動きをするのでやめたほうが良いです
また、chromeでバグがあり、意図しない動きになります

inlineを変更したくないなら、子要素はinline-blockにし、
blockを変更したくない場合は、親要素もblockに変更した方が良いです

特に鬼門なのはaタグです

挙動

親要素のinlineがblockにより分割され、
inlineは匿名ブロックというものに包含されます
内部的にblock要素とinline要素は兄弟関係になり、
各styleは親要素のものを引き継ぎます
(cssの記述自体は兄弟関係ではなく、親子関係のままになります)

含める事自体に問題は無いのか

文法上は問題はありません
display:inlineの中にdisplay:blockを入れてはいけない、というルールは無く、仕様もキッチリ決まっている
ただ尋常じゃなく読みづらくなるので、避けたほうが良い

css

Posted by admin8admin