CSS：这个边距来自哪里？

Question

这是我的问题：http://jsfiddle.net/gregseth/548S2/

为什么元素之间有空格？我怎么能摆脱它？

另外，为什么在jsfiddle上没有考虑<img>的尺寸，当它在'普通'HTML页面（Firefox）上时？

Answer 1

这是HTML块渲染空间的结果，当块项目之间有空格或换行符时。您可以将项目浮动到左侧：

http://jsfiddle.net/548S2/4/

或删除元素之间的换行符：

http://jsfiddle.net/548S2/2/

Answer 2

这是因为

nav a { display:inline-block; }

如果您将其更改为：

nav a {    
    display:block;
    float:left;
}

利润已经消失。

jsfiddle：http://jsfiddle.net/548S2/3/

Answer 3

只需将 float：left 应用于CSS中的“nav a”。

Answer 4

这是html中<a>元素之间的空格（换行符）。所有inline或inline-block元素都会发生这种情况。

选项1： 在margin-right:-4px;代码上使用<a>。

选项2： 删除<a>标记之间的空格。

选项3： 如其他答案中所述，将<a>代码更改为display:block; float:left。在这种情况下，您需要修复容器元素的高度（在您的情况下为<nav>），或在下一个元素上使用clear:left以防止浮动重叠它。有时避免这种浮动方法并使用其他选项之一是有用的。