html - 为什么这2个div之间有差距

Question

http://jsfiddle.net/D9gnP/110/

两列之间有一个小间隙。我什么都没设置，那个间隙从哪里来？

这与这些元素上的 display:inline-block 有什么关系吗？他们有内部 margin 吗？

  <div id="wrapper" style="margin:auto;background-color:yellow;height:100%;">
      <div style="width:50px;height:100%;">
        <div class="fluid-column" style="height:80%; background-color:green;">
          <div style="background-color:#ff99cc; height:25%;">1</div>
          <div style="background-color:#ff33cc; height:50%;">2</div>
          <div style="background-color:#ff66cc; height:25%;">3</div>
        </div>
        <div class="fix-column" style="height:20%; background-color:violet">
          <div style="background-color: orange;height:50%;">Total</div>
          <div style="background-color: blue;height:50%;">Test</div>
        </div>
      </div>
    </div>

body, html {
    width:100%;
    height:100%;
    margin:0;
    padding:0;
}
div {
    text-align:center;
    text-indent:-0.5em;;
}
div span {
    display:inline-block;
    height:100%;
    vertical-align:middle;
    width:0;
}

Answer 1

由于元素是内联的，因此它们被视为内联，包括因空白而产生的空格。

尝试删除元素之间的空白(包括新行)。

<div>Content</div><!-- this white space/new line causes the gap -->
<div>Content</div>

<div>Content</div><div>Content</div><!-- no new line/white space, no gap-->

你也可以将这个添加到容器元素中进行调整:

word-spacing: 0;

或者你可以只使用 float 元素:)

看这里，如果你只是删除空格，就会按预期工作:http://jsfiddle.net/D9gnP/121/