Question

.littlebox { margin:2px; padding:5px; width:100px; height:100px; border:1px solid #ccc; display:inline-block; }
.divrow { width:100%; height:120px; }


 <div class="divrow">
    <div class="littlebox">first</div>
    <div class="littlebox">second</div>
    <div class="littlebox">third</div>
 </div>

 <div class="divrow">
     <div class="littlebox">first</div><div class="littlebox">second</div><div class="littlebox">third</div>
 </div>

这两个呈现不同，在第一行中每个div之间有一个小空间，而在第二行中没有。将边距设置为0px仍会使空间可见。

http://jsfiddle.net/F3f3C/

我知道float：left而不是display：inline-block确实解决了问题，但我想知道是否有办法在不使用float的情况下完成它。

Answer 1

如果不改变HTML，您有两个选择：

将父级的font-size设置为零，并重置内联阻止子级的字体大小。
绝对定位元素（可以通过浮动或位置：绝对）

Answer 2

问题是您正在使用内联块。因为边距增加了som空间，但是内联块总是会占用一些空间。你可以漂浮你的div而不是

删除DIV之间的像素而不删除空格

2 个答案: