为什么使用display时div之间的空格：inline-block

Question

使用display: inline-block时，为什么div之间有空格，如下例所示：http://jsbin.com/IhULuZO/1/edit。

我知道我可以使用float:left，但如果可能的话，我想摆脱没有浮动元素的空白空间。

Answer 1

因为技术上代码的缩进是一堆空格。

<div class="parent">
    <div class="child"></div><div class="child"></div><div class="child"></div>
</div>

Answer 2

这些div之间有空格，使它们更具可读性。 要删除这些空格，请在html中注释所有空格，如下所示：

  <div class="parent">
    <div class="child"></div><!--
    --><div class="child"></div><!--
    --><div class="child"></div>
  </div>

Answer 3

这种情况正在发生，因为您已在单独的行上编写了.child个div。如果你在同一行上写它们，将会删除额外的空间。

<div class="parent">
    <div class="child"></div><div class="child"></div><div class="child"></div>
</div>

Answer 4

你应该删除 .child div之间的空格，Code应该出现像这些。

<div class="parent">
    <div class="child"></div><div class="child"></div><div class="child"></div>
 </div>