この例の最初の3つのdiv(緑、黄、赤)はinline
、間に空白があります。ただし、firebug
のStyle
検査を見てオンに切り替えるとShow User Agent Css
、これらの空白をレンダリングするcssは表示されません。なんで?
Firebugのバージョン:1.10.6
Firefoxのバージョン:16.0.2
空白はCSSではなくHTMLから取得されるため、終了タグと開始タグの間の改行の形式になります。
最初の3つの要素がインラインで表示されるという事実は、ブロック自体がテキストの一部であるかのように、HTML内のそれらの間の空白がそれらと一緒にインラインで流れることを可能にするものです。ブラウザが行うことは、HTMLの改行をレンダリング時に通常のスペース文字に変換することです。そのため、結果としてすべてが1行に表示されます。
親要素がないため。インライン要素にとどまるには、parent-block-elementが必要です。
のようなCSSプロパティがありますtext-space-collapse: discard;
が、それらは問題に対して機能しません。空白を表示するには、InternetExplorerDeveloperツールの使用をお勧めします。彼らはあなたにこれらのレイアウトバスターを見せてくれるので、彼らは素晴らしいです。