HTML内联块元素之间的差距是什么

Question

鉴于我有以下HTML标记：

<div id="conatiner">
    <div id="b1" class="block">block 1</div>
    <div id="b2" class="block">block 2</div>
    <div id="b3" class="block">block 3</div>
</div>

以及CSS脚本：

div {
    outline: solid gray 1px;
}

.block {
    display: inline-block;
    width:100px;
    background-color: gray;
}

我预计3个街区相邻，没有任何间隙。但不幸的是，结果显示彼此之间存在小的差距（在所有浏览器中）。

我使用浏览器开发人员工具检查了计算框模型，我没有找到任何可能导致间隙的边框，边距或填充值。然后我想知道是什么导致了差距？

现场演示：http://jsfiddle.net/YNmds/

Answer 1

HTML中的空格

将其更改为：

<div id="conatiner">
    <div id="b1" class="block">block 1</div><div id="b2" class="block">block 2</div><div id="b3" class="block">block 3</div>
</div>

但是：ぁzxswい

Answer 2

尝试

http://jsfiddle.net/jerryhuangme/95b39/

Answer 3

这是因为你使用了

.block {
   float: left;
   width:100px;
   background-color: gray;
}   

你可以这样做：

display: inline-block

并保持您的HTML原样：

div {
    outline: solid gray 1px;
    overflow: hidden;
}

.block {
    width:100px;
    background-color: gray;
    float: left;
}

Answer 4

另一种可能没有轮廓尺寸的解

<div id="conatiner">
    <div id="b1" class="block">block 1</div>
    <div id="b2" class="block">block 2</div>
    <div id="b3" class="block">block 3</div>
</div>