填充，列表和背景

我真的很困惑，這是我見過的最奇怪的錯誤。
這裏的jsfiddle例如：http://jsfiddle.net/c92mjkne/1/

正如你所看到的，當我們的「意見」中徘徊，#content GET STANGE利潤（但在CSS它沒有利潤）。據我所知，這是ol的利潤。但是爲什麼他們不在父母公司之外？
好的，這很奇怪。但！當我們在#content的CSS中將padding: 0;更改爲padding: 1px;時，我們看到，該塊沒有餘量！ WTF？幫我請：DI真的不知道該怎麼谷歌：d填充，列表和背景

這裏是例子：

#head, #foot, #content { 
 
    padding: 7px;` 
 
} 
 

 
#content { 
 
    padding: 0; 
 
} 
 

 
#comment:hover div { 
 
    background: #eee; 
 
} 
 

 
#comment { 
 
    border: 1px solid rgba(0, 0, 0, 0); 
 
} 
 

 
#comment:hover { 
 
    border: 1px solid gray; 
 
} 
 
ul { 
 
    margin: 7px; 
 
}

<div id="comment"> 
 
    <div id="head"> 
 
     Efog <span style="color: gray">today, 10:10 pm</span> 
 
    </div> 
 
    <div id="content"> 
 
     <ul> 
 
      <li>Hello</li> 
 
      <li>Stack</li> 
 
      <li>Overflow</li> 
 
     </ul> 
 
    </div> 
 
    <div id="foot"> 
 
     <a href="?">answer</a> 
 
    </div> 
 
</div>

這裏是代碼padding: 1px：

#head, #foot, #content { 
 
    padding: 7px;` 
 
} 
 

 
#content { 
 
    padding: 1px; 
 
} 
 

 
#comment:hover div { 
 
    background: #eee; 
 
} 
 

 
#comment { 
 
    border: 1px solid rgba(0, 0, 0, 0); 
 
} 
 

 
#comment:hover { 
 
    border: 1px solid gray; 
 
} 
 
ul { 
 
    margin: 7px; 
 
}

<div id="comment"> 
 
    <div id="head"> 
 
     Efog <span style="color: gray">today, 10:10 pm</span> 
 
    </div> 
 
    <div id="content"> 
 
     <ul> 
 
      <li>Hello</li> 
 
      <li>Stack</li> 
 
      <li>Overflow</li> 
 
     </ul> 
 
    </div> 
 
    <div id="foot"> 
 
     <a href="?">answer</a> 
 
    </div> 
 
</div>

對不起，英文，謝謝。

來源

2014-11-02 Efog

請不要接受Nathan的回答因爲它沒有解釋爲什麼會發生，我也想知道那裏的填充和邊距是怎麼回事。 – YemSalat 2014-11-02 14:20:15

我不會因爲它是問題的解決方案而不是回答我的問題。 – Efog 2014-11-02 14:22:08

據我所知，這是ol的利潤率。但是爲什麼他們不在父母公司之外？

因爲他們是應該是（在沒有「外部」 div，他們已經成爲利潤的的div） - http://www.w3.org/TR/CSS21/box.html#collapsing-margins：

「在CSS中，相鄰邊緣兩個或更多的盒子（可能或可能不是兄弟姐妹）可以組合成一個單一的邊距。結合這種方式的利潤率據說爲摺疊，並且由此產生的組合餘量被稱爲摺疊保證金。

在垂直方向鄰接利潤率崩潰，[...]」

因此，沒有錯誤可言，但規格跟着點。

但是！當我們在#content的CSS中將padding: 0;更改爲padding: 1px;時，我們看到，該塊沒有餘量！

在上述點閱讀，

「兩利潤率毗鄰當且僅當：
[...]
- 沒有線路盒，無間隙，不填充和無邊界將它們分開
[...]」

來源

2014-11-02 14:32:32 CBroe

哇。有趣。那好吧，我如何防止崩潰？ – Efog 2014-11-02 14:34:43

通過看到它的「如果且僅當」條件之一不再被滿足。在你的例子中，例如浮動'ul'（並且同時給它100％的寬度，以便它的寬度不縮小到適合）可以實現這個目標，http：//jsfiddle.net/c92mjkne/8/ – CBroe 2014-11-02 14:37:09

非常感謝！ – Efog 2014-11-02 14:38:13

http://jsfiddle.net/c92mjkne/2/

#comment:hover{ 
    background: gray; 
}

這是正常的，你設定您的評論內的每個格div的背景，但你設置一些保證金。如果你不想要任何空白區域，只需將背景顏色設置爲包含它們的div即可。

這不是一個錯誤。

來源

2014-11-02 14:16:45

我不認爲他是這樣問的。關於他的例子的奇怪之處在於，一旦將任何填充值添加到除＃0以外的'＃content' div之後邊距就會消失。 – YemSalat 2014-11-02 14:18:20

是的，我一開始做了，但我只需要突出顯示'＃comment'中的特定塊當它被徘徊。例如：http://jsfiddle.net/c92mjkne/4/ – Efog 2014-11-02 14:21:06

填充，列表和背景

回答

相關問題