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

Question

请参考以下示例：http://jsfiddle.net/Gv6w3/ 如您所见，这是一个简单的菜单项示例，将其设置为display:inline-block;。我所要做的就是让菜单项彼此紧密贴合-我将边距设置为0像素，但是无法摆脱它们之间的间距？出了什么问题？？ 编辑: 刚刚注意到有重复的问题：如何删除inline-block元素之间的空格？, display: inline-block额外的边距

- Yarin

Answer 1

将一个元素的关闭标签和下一个元素的开放标签放在同一行：

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

行内元素会占用它们之间的空格，这会呈现为1个空格。如果您将下一个元素直接放在上一个元素后面，则它们之间将没有空格，空格也会消失。

- Bazzz

---

@Bazzz- 很好知道- 但那太奇怪了- 回到浮点数... - Yarin

@Yarin，哈哈，说得也有道理。内联元素在同一行上确实有些合理。它看起来很奇怪，因为它们是“div”，也许如果您使用“span”并将它们全部放在一行上，它看起来会不那么奇怪。但最终，如果“float”对您有效，那为什么不呢？ :) - Bazzz

Answer 2

问题简述:

inline和inline-block会让浏览器将元素显示为单词。单词之间有空格。消除这些空格的方法有：

1. 从标记中删除空格
2. 使用浮动，它不关心标记中的空格
3. 或者找到一个空格的宽度，使用边距或定位来视觉上消除空格。

解决方案：

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

如果不能使用浮动，基于em的负边距是我的选择。

- RobW