html - CSS子边距不扩展父级

Question

我遇到了一个 CSS 问题。考虑以下布局：

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

h4 的垂直边距不会扩展容器 div，而是“溢出”，因此容器 div 上方和下方都有 20px 的边距，没有任何背景色。我知道相邻元素的垂直边距会塌陷，但这似乎是另一回事。

感谢您的回复！

Answer 1

添加overflow:auto到您的包含 div 将解决您崩溃的边距问题：

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

jsFiddle 示例

Answer 2

有点骇人听闻，但如果您出于某种原因不想要overflow: auto，可以padding: .1px 0在父级上使用，在所有现代浏览器中都将呈现为 0。