没有边距或内边距 - 但是在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，但它们之间有一些空隙 - 我不明白它来自哪里。

如果有人能为我解决这个问题，那就太好了。

- user3312607

---

只需将所有标记都写在一行上：http://jsfiddle.net/e86L9/4/ - emerson.marini

太可爱了 :) http://jsfiddle.net/e86L9/3/ - mingos

我不得不使用 white-space: normal（可能是因为我的HTML是由Markdown转换为HTML的工具生成的）。 - undefined

Answer 1

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

- Stefan Dunn

---

我选择了这个解决方案 - 因为它对我来说是最没有意义的，如果有的话。不过它运行得很好，谢谢伙计。 - user3312607

我建议您将其选为答案，以供未来用户参考。 - Stefan Dunn

简单地说，CSS 属性 letter-spacing 默认情况下与 font-size 的值成比例（这可以防止字母和其他内联元素挤在一起）。将 font-size: 0 设置为此属性会删除该间距。 - Stefan Dunn

嗯，是的，显然字体大小会添加边距。我不知道你是怎么发现的。 - Darin Cardin

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

- faby