为什么inline-block内部空span元素会换行？

Question

代码如下
<div style="display: inline-block">

<span>中国</span>
<span style="margin-left: 10px"></span>

</div>

显示如下

问题是为什么第二个span空元素会单独一行显示？

Answer 1

这个问题产生的原因是换行引起的，因为我们写标签时通常会在标签结束符后顺手打个回车，而回车会产生回车符，回车符相当于空白符，通常情况下，多个连续的空白符会合并成一个空白符，而产生“空白间隙”的真正原因就是这个让我们并不怎么注意的空白符。
所以问题在于你span换行了，你如果写在一行就不会有这个问题。。。

Answer 2

原因在于inline-block边沿会产生隐藏的1-5px空间，你可以用一个固定宽度100px的容器,里面放4个宽25的元素看，他们不是在一行排列的.

你的案例中，div变为行内块，宽度由内容决定，所以你看div的宽度，是文本加span的left的，但是inline-block产生的空间就多出来了，所以换行了。假如你给div设置宽度，大于内容+inline-block产生的空间，就不会换行了