没有边距或填充 - 但div元素之间仍然是空格

Question

这不是第一次让我感到困惑。

<div id="wrap">
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
</div>

#wrap {
width:400px;
height:200px;
background:red;
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
}

.content {
width:100px;
height:200px;
display:inline-block;
background:green;
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
}

在JSFiddle

上查看时，您可能会有更好的理解

JSFiddle Example

根据我的理解，四个div应该完全适合父div， 但它们之间有一个空间 - 我不明白它的来源。

如果有人能为我解决这个问题，那将会很棒。

Answer 1

这是由于font-size。您需要在#wrap元素上设置font-size: 0px。 http://jsfiddle.net/52eaz/

Answer 2

你想要这样的东西吗？

http://jsfiddle.net/e86L9/12/

#wrap {
    width:400px;
    height:200px;
    background:red;
    margin:0px 0px 0px 0px;
    padding:0px 0px 0px 0px;
}

.content {
    float:left;
    width:100px;
    height:200px;

    background:green;
    margin:0px 0px 0px 0px;
    padding:0px 0px 0px 0px;
}