为什么块元素之间有空格？

Question

所以我知道这种情况发生了，而且我知道它的解决方法（大多数时候我只是使用浮点数）但我的问题是为什么还有空间开始？

这是我弄乱的小提琴：

http://jsfiddle.net/6LftK/

如果您将.box更改为float: left;，则该空间会消失。真的很好奇为什么首先有一个空间。

Answer 1

查看此修订版：http://jsfiddle.net/6LftK/1/并注意我已删除HTML中元素之间的空格。存在space，因为HTML中有空格，inline元素尊重该空格，并且包含inline-block个元素。通过浮动元素，您已将其从inline元素更改为block。

<div id="manufactureLogos">
    <div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div>
</div>

Answer 2

存在空格的原因是因为内联块元素被视为普通文本，因为它们具有空格。一些解决方法包括在容器上使用font-size: 0，然后在内联块元素上重置字体大小;使用负边距来折叠空间;或者通过改变你的HTML来删除空格。

CSS Tricks有一篇关于这个主题的方便文章。

Answer 3

解决此问题的最佳方法是在 #manufactureLogos 中将 font-size 设置为 0 ，这样就可以这样了

#manufactureLogos {
    width: 850px;
    font-size: 0;
}

此外，您应该在 .box 中设置 font-size ，这样就可以这样了

.box {
    background: gray;
    width: 140px;
    height: 140px;
    padding: 0px 15px;
    font-size: 16px;
}

也许此链接会对您有所帮助，它有更多详情

Fighting the Space Between Inline Block Elements | CSS-Tricks

希望这会对你有帮助......

Answer 4

您可以添加

    margin: -2px;

到#manufactureLogos div {}获取一个简单的CSS技巧，以清除空格和换行符生成的空白区域，并保存代码语法。

#manufactureLogos div{
    display: inline-block;
    margin: -2px;
}

但这仅假设空白区域的默认字符大小占用2个浏览器像素。

双重保险将使用aaron的方法，并且默认字体大小为0。

#manufactureLogos div{
    display: inline-block;
    margin: -2px;
    font-size: 0;
}

JSFiddle Example

或者，正如arronburows所提到的，您可以设置容器font-size: 0;，同时有效地删除whtie-space。