如何消除div标签之间的空隙？

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

<h1>Heading</h1>

我想直接图像之上坐标题，所以我用：

margin-top: -25px;

这正确显示Chrome和Safari。在Firefox中，头部和图像重叠。随着一段时间的玩耍，似乎Chrome和Safari在div之间创建了一个空白空间。

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

2012-01-06 Sheldon

这是带有内置页边距的<h1>标签。大声笑〜风格的<h1>标记margin:0px; padding:0px;

2012-01-06 01:19:51 James

我已经尝试过这一点，但它完全搅乱与我已经有了。如果我把它放在一起，它会这样读取http://pastebin.com/31HMFgF8 – Sheldon 2012-01-06 01:27:20

那么在你链接的例子中，你把margin：0px;填充：0像素;在覆盖你的左右边距的底部。将0px行放在自动行上面，看看是否给你你需要的东西。如果现在，你不希望它做什么？ – James 2012-01-06 01:34:48

与其他H1标签混淆？给它一个ID并使用它。 – 2012-01-06 01:35:42

詹姆斯是正确的 - 标签有默认的边距，*这也是不同的浏览器之间。您可以覆盖它们全部，也可以使用CSS重置（如Blueprint）来清除所有默认浏览器CSS样式，以便您可以从头开始自定义它们。

我几乎可以保证，如果你最终有任何bigish项目，CSS间距的问题，这将是缺乏一个复位:)的

也知道，浏览器解析选项卡和换行符空白 - 对此你几乎没有办法。如果网页上的水平元素位于源代码的换行符中，则它们将被空格分开（有时这不是您想要的）。

2012-01-06 01:28:21 Art

我认为这将有助于：

#social img { display: block; }

或

#social img { vertical-align: top; }

2012-01-06 01:30:18

回答