display：inline-block;奇怪的间隔行为 [英] display: inline-block; weird spacing behavior

问题描述

由于我的空格被替换为& nbsp; ，上一个问题被回答了，但是...

Since I got my spaces replaced with  's, the previous question is answered, but...

我还不知道是什么原因导致此错误： http://jsfiddle.net/cEkQG/

I still have no idea what causes this bug: http://jsfiddle.net/cEkQG/

看看第一段是如何丢失了它的孩子（ inline-blocks ）尾随/注意， span 的标记在段落的单行中。

Look how the first paragraph has lost it's children (that are inline-blocks) trailing/leading spaces. Note, that the markup for spans are in a single line of paragraph.

第二段有空格，

这个错误发生在最新的Chrome和最新版本Firefox

The bug occurs on latest Chrome and latest Firefox (freshly updated to 12), have not tested with other browsers yet.

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

What is the reason behind this weird bug/behavior?

推荐答案

块中的前导和尾随空白（特别是内联块）被去除。将您的内联块中的尾部空格移动到内联块的外部 - 在它的结束标记之后。换行符也是空格，这就是为什么多行示例按照您的期望工作。

Leading and trailing whitespace in blocks (inline-blocks in particular) are stripped. Move trailing space inside your inline block to outside of the inline block — after its closing tag. Line feed is whitespace too, that's why multiline example works as you are expecting.

这篇关于display：inline-block;奇怪的间隔行为的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！