垂直堆疊divs之間有空間（火狐）

一個小小的CSS問題，我不能完全找到所以 - 雖然我認爲它已被問過，道歉。垂直堆疊divs之間有空間（火狐）

所以，這裏是HTML：

<html> 
    <body style="color:white"> 
     <div class="a" style="width: 70%; background: blue;"><p>helloes helloes helloes</p></div> 
     <div class="b" style="width: 70%; background: pink;"><p>talk talk talk</p></div> 
     <div class="a" style="width: 70%; background: blue;"><p>yay! yay! yay!</p></div> 
    </body> 
</html>

可愛。

如果我在ff中打開它，我會得到三個垂直堆疊的div - 但是它們之間有空間！這不是我想要的！戲劇拉瑪！

即按照我的預期渲染，這引發了一些警鐘。

即是9，FF是11和

歡呼聲，安德魯！

更新了很多提及「p」標籤 - 爲什麼/ p標籤如何影響任何東西？它是不是由div包裝，並且div具有應用的背景顏色？不應該，其實，div只是內部更大，但相鄰divs之間沒有空間？

UPDATE：

所以我想這個網站，而不是：

<html style="margin:0px; padding:0px;">

這並沒有解決問題，也這樣：

<body style="color: white; margin:0px; padding:0px;">

也未解決問題 - 在兩種情況下，css都不應該被「p」標籤繼承？有趣的是，我還檢查了與螢火蟲生成的CSS，和P標籤都有餘量和填充0 ...

的想法？

更新：很多答覆要求我將填充設置爲0.這不起作用。任何更多的答案說，我會投票'時間。

更新：這個問題是真正具體使用內聯的CSS。我實際上並不關心內聯css，但爲什麼每個人都爲他們的答案提供css樣式表？

更新：有人提到了-webkit，雖然我根本沒有使用谷歌瀏覽器，但這是一個有趣的想法。我看不到任何ff相關的額外CSS可能會導致這個問題，任何人有任何想法？

來源

2012-05-22 bharal

嘗試刪除div之間的換行符。某些瀏覽器將換行符作爲空格。我以前遇到過這個問題。 – dpk2442

又一個相同的問題，我見過這很多時間，-1和檢查http://stackoverflow.com/questions/172918/div-100-height-works-on-firefox-but-not-in-ie什麼事 –

@Bondye一次又一次的同樣的問題，但沒有回答你？簡單點！好極了！此外，您鏈接到的頁面...這是相反的問題！實際上，這甚至不是同一個問題。 – bharal

我用Chrome試過了，看到了相同的行爲。看着下面的CSS（F12）後，Chrome是以下兩行申請的<p>標籤：

-webkit-margin-before: 1em; 
-webkit-margin-after: 1em;

如果我添加以下的CSS空行消失：

-webkit-margin-before: 0px; 
-webkit-margin-after: 0px;

希望有所幫助！

來源

2012-05-22 12:08:58 JerseyMike

這是因爲<p>元素的自動生成邊距。

Firefox（和其他）與IE不同。只需在您的css中執行
p{margin: 0}即可「重設」。

您可以一次對所有元素執行相同操作（我推薦），只需在您的css中添加
* { margin: 0; padding: 0;}即可。

小提示：安裝瀏覽器擴展以檢查您的元素（如Firebug）的行爲。

來源

2012-05-22 12:09:28 TwisterStudios

基本上P標籤默認採用保證金。添加css

p{margin:0px; padding:0px;}

來源

2012-05-22 12:11:04

您的<p>標籤有垂直邊距。 CSS中的垂直邊距合攏，因此子邊緣有時適用於父母。請參閱http://www.w3.org/TR/CSS21/box.html#collapsing-margins

來源

2012-05-22 17:15:10

我解決了這個問題，指定了CSS'line-height'我只是將它設置爲與字體大小相同，然後在所有瀏覽器中獲得了一致的DIV間距。

來源

2014-03-26 20:24:52 rethenhouser2

垂直堆疊divs之間有空間（火狐）

回答

相關問題