0 
<!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也在拉低其父级。

4

3 回答 3

2

Hey now give to #showcase overflow:hidden in your css

#showcase{
overflow:hidden;
}

Live demo

this is the Collapsing Margins and more info

于 2012-08-07T10:03:47.697 回答
0

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

h1 {
    font-size: 2em;
    margin: 0;
}
于 2012-08-07T10:05:28.840 回答
0

这里没有错，这是正常行为。边距是要崩溃的——它是规范的一部分。

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

我通常采取的步骤：

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

希望对未来有所帮助:)

于 2012-08-07T10:09:05.303 回答