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

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

将one的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的负边际会得到我的投票。

Answer 3

此问题here还有另一个Stack Overflow线程，但这是另一种解决方案：http://jsfiddle.net/Gv6w3/3/

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

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