当显示内联块并水平堆叠时,如何摆脱div之间的空间？

Question

我有三个divs水平并排堆叠在一起,这些div设置为显示:inline-block.但是,我注意到即使使用某种CSS重置,它们之间也会产生4px的小距离？为什么会这样？有没有办法全局摆脱这种情况发生或我只需要将div移到左边-4px？

Answer 1

这是因为您的浏览器将呈现DIV的内联,并且与单词一样,它们由空格分隔.

空格的宽度由font-size决定,因此一个简单的技巧是将包含元素的font-size设置为0,然后重置内联div中的font-size.

#container { font-size: 0; }

#container > div {font-size: 1rem; display: inline-block; }

我已经在这个小提琴中证明了这一点.

有关详细信息,请查看此文章.

Answer 2

假设这是因为每个结束标记后的换行符.这些在HTML中作为空格处理.尝试删除它们.这里有一些演示:

http://jsfiddle.net/eeRFC/ - 有空格

<div>test</div>
<div>test</div>
<div>test</div>

http://jsfiddle.net/eeRFC/1/ - 没有空格

<div>test
</div><div>test
</div><div>test
</div>

常见的CSS:

div {
  border:solid 1px black;
  display:inline-block;
}

Answer 3

摆脱前一个div结束和下一个div开始之间的新行例如替换以下内容:

<div id="div1">
 Div Item 1
</div>
<div id="div2">
 Div Item 2
</div>

同

<div id="div1">
 Div Item 1
</div><div id="div2">
 Div Item 2
</div>

Answer 4

使用任何一个float:left或display:inline-block将工作.请参阅此处的工作示例链接.