2013-02-05 33 views
0

我得到了一個css問題。考慮以下佈局:CSS子頁邊距不會延伸父項

<div class="footer-container" style="background: #ff00ff"> 
<footer class="wrapper"><h4 style="margin: 20px 0">Some Headline</h4></footer> </div> 

H4的垂直邊距不延長div容器,相反,他們「溢出」,從而使存在div容器上方和下方之外的20像素的保證金,這沒有按」沒有任何背景顏色。 我知道相鄰元素的垂直邊緣會崩潰,但這似乎是別的。

謝謝您的回覆!

+1

CSS有這個東西叫摺疊邊距。 http://www.w3.org/TR/CSS21/box.html#collapsing-margins – Jrod

回答

3

添加overflow:auto您包含分區將解決您的崩潰保證金的問題:

<div class="footer-container" style="background: #ff00ff;overflow:auto"> 

jsFiddle example

+0

這對大多數人來說可能看起來很奇怪。你能否提供一個解釋爲什麼這會起作用?此外,還有一些其他情況下的利潤率不會崩潰的列表[http://reference.sitepoint.com/css/collapsingmargins]。 – showdev

+0

好的,謝謝。那麼,這是如何根據規格進行修改的? – user1870482

+0

@ user1870482 - 是 – j08691

0

的哈克類,但如果你不想overflow: auto出於某種原因,你可以上使用padding: .1px 0該父項在所有現代瀏覽器中將呈現爲0。