Question

我知道我正在寻求的真正目标是css圣杯，但在这个非常简单的实验中，我得到了“幻影”间距，我希望有人可以解释。

以下情况发生在Firefox中，但不会发生在Chrome中（虽然Chrome有自己的问题，我稍后会解决）：

HTML：

<div id="wrapper">
    <div id="div1"></div>
    <div id="div2"></div>
    <div id="div3"></div>
</div>

CSS：

#wrapper {
    width: 760px;
    height: 100px;
    background-color: yellow;
}

#wrapper div {
    display: inline-block;
    padding: 0;
    margin: 0;
    width: 250px;
    height: 90px;
    background-color: red;
}

#wrapper #div1 {
    background-color: red;
}

#wrapper #div2 {
    background-color: green;
}

#wrapper #div3 {
    background-color: red;

}

注意我使用了背景颜色而不是边框，因此任何盒子间距问题都没有发挥作用（我知道）。

如果我检查Firebug中的每个div（外部和内部），宽度是正确的，但每个div之间明显存在间隙，第三个div包裹到下一行。

这种情况发生在我将宽度设置为761px之前，每个div在每个内部div之间的间隙约为3-4个像素，在最后一个之后为1-2个像素。

所以在所有边距和填充和边框都关闭的情况下，这个间距来自哪里，是否有一种方法（没有浮点数或负边距）将此间距设置为0？

我认为Firefox可能会应用内联属性，例如字间距或字母间距，但我也尝试过关闭所有这些内容。

任何人都知道这个空间来自哪里？

Answer 1

将font-size:0;定义为其父DIV。写得像这样：

#wrapper {
    font-size:0;
    width: 760px;
    height: 100px;
    background-color: yellow;
}

#wrapper div{
 font-size:15px;
}

选中此http://jsfiddle.net/CXr5A/

或

你可以在一行中写下你的内部div：

<div id="wrapper"> <div id="div1"></div><div id="div2"></div><div id="div3"></div> </div>

选中此http://jsfiddle.net/CXr5A/2/

Answer 2

这与font-size有关。如果您想知道正确的方法来完成您所尝试的内容，请使用此CSS代替它。

提示：在启动CSS文件之前，始终养成应用全局重置的习惯。

CSS：

*{
    padding: 0px;
    margin: 0px;

}

#wrapper {
    width: 750px;
    height: 100px;
    background-color: yellow;

}

#wrapper div {
    width: 250px;
    height: 90px;
    display: block;
    float: left;
    background-color: red;
    font-size:15px;
}

#wrapper #div1 {
    background-color: red;
}

#wrapper #div2 {
    background-color: green;
}

#wrapper #div3 {
    background-color: red;

}

Answer 3

删除HTML中的空格。那样可以解决你的问题。

<div id="wrapper">
<div id="div1"></div><div id="div2"></div><div id="div3"></div>
</div>

您可以改为添加div{margin-right: -4px;}

this article中的更多信息。

fiddle.

Firefox / Gecko在内联块div中添加间距？

HTML：

CSS：

3 个答案: