如何消除div标签之间的差距？

Question

我有以下html：

<div id='social'>
<img src="twitter.png"  alt="Twitter"/>
</div>

<h1>Heading</h1>

我希望图像直接位于标题的顶部，所以我使用了：

margin-top: -25px;

这在Chrome和Safari中正确显示。然而在Firefox中，头部和图像重叠。通过一些游戏，似乎Chrome和Safari在div之间创建了一个空白区域。

如何安排我的页面/ css，使其在图像和标题之间没有空格？

Answer 1

这是带有内置边距的<h1>标记。 lol~使用<h1>

设置margin:0px; padding:0px;标记的样式

Answer 2

詹姆斯是对的 - 标签默认有边距，*也因浏览器而异。您可以全部覆盖它们，也可以使用Blueprint等CSS重置来清除所有默认浏览器CSS样式，以便您可以自己从头开始定义它们。

我几乎可以保证，如果你在任何重大项目上最终都会遇到CSS的间距问题，那就是缺少重置：）

还要知道浏览器将标签页和换行符解析为空格 - 而且你可以做的很少。如果您的网页上有水平元素位于源中的换行符上，则它们将被空格分隔（有时这不是您想要的）。

Answer 3

我认为这会有所帮助：

#social img { display: block; }

或

#social img { vertical-align: top; }

现场演示： http://jsfiddle.net/9z6BM/1/