为什么在一系列内联div之间呈现的空白区域不显示在firebug的“Style”检查框架中？

Question

this example中的前三个div（绿色，黄色和红色）为inline，并且它们之间有一个空格。但是，查看firebug Style Show User Agent Css检查并切换{{1}}并未显示任何呈现这些空格的CSS。为什么呢？

Firebug版本：1.10.6

Firefox版本：16.0.2

Answer 1

因为空格来自HTML而不是CSS，所以在结束标记和开始标记之间以换行符的形式出现。

前三个元素以内联方式显示的事实是允许HTML中它们之间的空白与内联一起流动，就像块本身是文本的一部分一样。浏览器的作用是在渲染时将HTML中的换行符转换为常规空格字符，因此您可以在一行中看到它们。

Answer 2

因为没有父元素。内联元素需要父块元素才能保留。

有像text-space-collapse: discard;这样的CSS属性，但它们不能解决您的问题。要查看您的空白，我建议您使用Internet Explorer Developer工具。他们很棒，因为他们向你展示了这些布局破坏者。