【发布时间】：2013-12-09 21:10:23
【问题描述】：
请看下面的例子： http://jsfiddle.net/Gv6w3/
如您所见，这是一个设置为display:inline-block; 的简单菜单项示例摆脱它们之间的间距？怎么回事？？
编辑：刚刚注意到重复，我的错：How to remove the space between inline-block elements?，display: inline-block extra margin
【问题讨论】：
【发布时间】：2013-12-09 21:10:23
【问题描述】：
将一个元素的结束标签和下一个元素的开始标签放在同一行：
<div class="top-menu-item">
Item 2
</div><div class="top-menu-item">
Item 3</div>
内联元素采用它们之间的空白，这将呈现为 1 个空格。如果将下一个元素直接放在前一个元素之后，则两者之间将没有空格，并且空格将消失。
【讨论】：
-
@Bazzz- 很高兴知道- 但这太奇怪了- 回到花车...
-
@Yarin，哈哈，够公平的。好吧，尽管内联元素在同一行上，但它确实有些道理。它看起来很奇怪，因为它们是
div，也许如果你使用span并将它们全部放在一行上，它看起来就不那么奇怪了。但最后，如果float适合你，那为什么不呢？ :)
快速解决问题：
inline 和 inline-block 告诉浏览器显示一个元素，就好像它是一个单词一样。单词之间有空格。摆脱这些空间的选项是：
- 从标记中删除空格
- 改用浮点数，它不关心标记中的空格
- 或者找到一个空间的宽度并使用边距或定位在视觉上移除这些空间。
解决方案：
所有 css 选项，永远：http://css-tricks.com/fighting-the-space-between-inline-block-elements/
如果你不能浮动，我会选择基于 em 的负边距。
【讨论】：