今天想把一个p 对半分成两半的时候，使用下面的代码：

<p class="cell">
   <span>a</span>
   <span>b</span>
</p>

.cell span{
  display:inline-block;
  width:50%;
}

发现两个span并不是正好水平对齐，而是每个span单独占用了一行。

当我把代码调整成下面的时候：

<p class="cell">
     <span>a</span><span>b</span>
</p>

这个两个span正好各占50%，且在同一行上。

在网上搜索了下原因：

原来是当使用inline-block 的时候，如果两个inline-block元素之间有一个新行，那么在它们之间就会有一个空格。那么50% + 50% + space > 100%; 第二个inline-block就放不下了。

解决办法也有很多种：
1.不换行

<span>a</span><span>b</span>

还是不换行

<span>
</span><span>
</span>

3.通过注释换行

<span></span><!--
--><span></span>

当然还有其他解决办法。