Html 删除div之间的像素而不删除空白 .littlebox{margin:2px；padding:5px；width:100px；height:100px；border:1px solid#ccc；display:inline block；} .divrow{宽度：100%；高度：120px；} 第一 第二 第三 第一第二第三

这两种渲染方式不同，第一行中每个div之间有一个小空间，第二行中没有。将边距设置为0px仍将使空间可见

---

我知道float:left而不是display:inline块确实解决了这个问题，但我想知道是否有一种不使用float的方法来解决这个问题

问题是您正在使用内联块。当然，边距会增加som空间，但内联块总是会产生一些空间。您可以浮动div，而无需更改HTML。您有两个选项：

将父项的字体大小设置为零，并重置内联阻止子项的字体大小

绝对定位元件（可通过浮动或定位：绝对）

---

我希望这是一个输入错误。.第二行之间有空格，因为根据Chrome的inspect元素，有

2px

的

边距。你需要整个事情都像第一行吗？我希望第一行和第二行一样，但不想更改html，因为它变得不可读。将边距设置为0仍然会增加空间，而且我确实提到过，我想知道是否有一种方法可以在不浮动divs的情况下实现这一点。当使用inline-block时，您会得到空间。如果将字体大小设置为0，您将消除divs之间的空间。然后可以在每个div中添加另一个div，它将字体大小添加到hanks中，这里的第一个解决方案是jsfiddle，它为对该解决方案感兴趣的任何人提供了更改。
.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>