html - CSS：这个边距从何而来？

Question

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

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

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

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

<a>它是html 中元素之间的空格（换行符） 。这发生在所有inline或inline-block元素上。

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

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

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