如何消除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

回答