无法消除内联块元素之间的空格。

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

问题的快速解决：

inline和inline-block告诉浏览器显示一个元素，就好像它是一个单词一样。语言在它们之间有空隙。去除这些空间的选项是：

1. 删除标记中的空格(
2. 使用浮点数)，后者不关心标记
3. 中的空格，也不关心空间的宽度，而是使用边距或位置来视觉上删除空格。

解决方案：

所有css选项，永久：http://css-tricks.com/fighting-the-space-between-inline-block-elements/

如果你不能浮动，一个基于em的负差得到了我的支持。