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

ねえ今#showcase overflow:hiddenあなたのCSSで与える

#showcase{
overflow:hidden;
}

ライブデモ

これは折りたたみマージンと詳細情報です

于 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 に答える