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

Question

Given I have below HTML markup:

<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>

and below CSS scripts:

div {
    outline: solid gray 1px;
}

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

I expected the 3 blocks to be adjacent without any gaps. But unfortunately, the result shows small gaps between each other (in all browsers).

I checked computed box-model with browser developer tools, I did not find any border, margin or padding value which may result in gaps. Then I am wondering what results in the gaps?

Live demo: http://jsfiddle.net/YNmds/

Answer 1

White space in your HTML

Change this to:

<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>

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

Answer 2

Try

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

Answer 3

It's because you used display: inline-block

You could do this:

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

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

And keep your HTML as it is:

<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

Another possible solution without outline size.

div {

    outline: solid gray;

}