没有边距或填充 - 但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示例

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

如果有人能为我解决这个问题会很棒.

Answer 1

这是由于字体大小.您需要设置font-size: 0px#wrap元素.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;
}