无法摆脱内联块元素之间的空格

Question

请参阅以下示例:http: //jsfiddle.net/Gv6w3/

正如你所看到的,这是一个设置为display:inline-block;All 的菜单项的简单示例我想要做的是让菜单项相互冲洗 - 我将边距设置为0px,但我无法摆脱它们之间的间距？到底是怎么回事？？

编辑:刚刚注意到重复,我的坏:如何删除内联块元素之间的空格？,显示:内联块额外保证金

Answer 1

将一个的close标记和下一个元素的open标记放在同一行:

<div class="top-menu-item">
Item 2
</div><div class="top-menu-item">
Item 3</div>

内联元素采用它们之间的空白,这将呈现为1个空格.如果你将下一个元素直接放在前一个元素之后,那么它们之间将没有空格,空间就会消失.

Answer 2

快速减少问题:

inline并inline-block告诉浏览器显示一个元素就好像它是一个单词.单词之间有空格.您摆脱这些空间的选择是:

1. 从标记中删除空格
2. 而是使用浮点数,它不关心标记中的空格
3. 或者找到空间的宽度并使用边距或定位来直观地移除空间.

解决方案:

所有css选项,永远更多:http://css-tricks.com/fighting-the-space-between-inline-block-elements/

如果你不能浮动,基于em的负保证金得到我的投票.