所以我知道这种情况发生了,而且我知道它的解决方法(大多数时候我只是使用浮点数)但我的问题是为什么还有空间开始?
这是我弄乱的小提琴:
如果您将.box
更改为float: left;
,则该空间会消失。真的很好奇为什么首先有一个空间。
答案 0 :(得分:4)
查看此修订版: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>
答案 1 :(得分:0)
存在空格的原因是因为内联块元素被视为普通文本,因为它们具有空格。一些解决方法包括在容器上使用font-size: 0
,然后在内联块元素上重置字体大小;使用负边距来折叠空间;或者通过改变你的HTML来删除空格。
CSS Tricks有一篇关于这个主题的方便文章。
答案 2 :(得分:0)
解决此问题的最佳方法是在 #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
希望这会对你有帮助......
答案 3 :(得分:0)
您可以添加
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;
}
或者,正如arronburows所提到的,您可以设置容器font-size: 0;
,同时有效地删除whtie-space。