display:inline-block;奇怪的间距行为

时间:2012-05-06 21:21:06

标签: html css

由于我用 取代了我的空格,之前的问题得到了解答,但是......

我仍然不知道导致此错误的原因:http://jsfiddle.net/cEkQG/

看看第一段是如何丢失它的子(即inline-blocks)尾随/前导空格。请注意,spans的标记位于段落的单行中。

第二段有空格,但是spans的标记都在一个单独的行中。

该错误发生在最新的Chrome和最新的Firefox(刚刚更新为12)上,尚未经过其他浏览器的测试。

这种奇怪的错误/行为背后的原因是什么?

4 个答案:

答案 0 :(得分:4)

块中的前导和尾随空格(特别是内联块)被剥离。将内联块内的尾随空格移动到内联块之外 - 在其结束标记之后。换行也是空白,这就是多行示例按预期工作的原因。

答案 1 :(得分:0)

您希望使用display: inline代替inline-block,因为该元素将是" inline"文本不与其他块元素。 http://jsfiddle.net/elclanrs/cEkQG/1/

答案 2 :(得分:0)

<span class="item">Lorem Ipsum is simply dummy text</span> <span class="item">of the printing and typesetting</span><span class="item"> industry.</span>

答案 3 :(得分:0)

不起作用的全部原因是因为。它代表不间断的空间,因此不能包装不间断的空间,因为它是不间断的,因此不包装。