Question

<!doctype html>
<html>
<head>
    <title></title>
</head>
<body>
    <nav><ul class='container'>
        <li><a href='#'>Home</a></li>
        <li><a href='#'>Categories</a></li>
        <li><a href='#'>How to Play</a></li>
        <li><a href='#'>Contact</a></li>
    </ul></nav>
    <article id="showcase">
        <h1>Hello</h1>
    </article>
</body>
</html>

http://jsfiddle.net/hjYzs/

怎么了？ <h1>的余量似乎也在降低其父article。

Answer 1

嘿现在在你的css中给#showcase overflow:hidden

#showcase{
overflow:hidden;
}

Live demo

这是崩溃边缘和 more info

Answer 2

http://jsfiddle.net/hjYzs/2/

h1 {
    font-size: 2em;
    margin: 0;
}

Answer 3

这里没有错，这是正常行为。边距意味着崩溃 - 这是规范的一部分。

我认为这个想法是相邻元素的顶部和底部边缘永远不应该加在一起，最大边距是显示的边缘。

我通常采取的步骤：

删除默认的上边距
尽可能在边距上使用填充。
我还经常为元素添加1px填充以包含顶部和底部边距 - 特别是如果父级具有不同的背景颜色。

希望有助于未来：）

最高保证金也拉低了父母

3 个答案: