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>

演示： http://jsfiddle.net/jerryhuangme/95b39/

Answer 2

尝试

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

Answer 3

这是因为您使用了display: inline-block

你可以这样做：

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

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

并保持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>

Answer 4

另一种没有轮廓尺寸的可能解决方案。

div {

    outline: solid gray;

}