不能得到inline-block的元素

Question

请看下面的例子之间摆脱空间： http://jsfiddle.net/Gv6w3/

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

编辑：只注意到重复，我的坏：How to remove the space between inline-block elements?，display: inline-block extra margin

Answer 1

把结束标记一个和下一个元素的同一行上的开放标记：

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

内联元素使用它们之间的空白，并将其呈现为1空格。如果您将下一个元素直接放在前一个元素之后，则中间不会有空格，并且空格将消失。

Answer 2

有一个关于这个问题here另一个堆栈溢出的线程，但这里是一个替代的解决方案：http://jsfiddle.net/Gv6w3/3/

.top-menu-item { 
    display:block; 
    float:left; 
    width:100px; 
    margin:0px; 

    background:#FFFF00; 
    border:solid thin #00FF00; 
} 

Answer 3

问题的快速终极版：

inline和inline-block告诉浏览器，如果它是一个字，显示的元素。单词之间有空格。您为摆脱这些空间的选项有：

1. 从标记
2. 使用浮相反，它不关心空格标记
3. 或者找一个空间，使用的宽度删除空格边距或定位以视觉去除空间。

解决方案：

所有的CSS选项，直到永远：http://css-tricks.com/fighting-the-space-between-inline-block-elements/

如果您不能浮动，一个基于EM切缘阴性得到我的投票。