コンテナdiv内のdivの余白部分を調整するdiv内コンビネーションコンテナとコンテナdivの両方をボディから押し出す

これは私が愚かなことをしている問題でなければならないと思うが、私はそれを理解できない。ページのHere's a demo page showing my problem.ソース：コンテナdiv内のdivの余白部分を調整するdiv内コンビネーションコンテナとコンテナdivの両方をボディから押し出す

<html> 
<head> 
    <title>demo</title> 
    <style type='text/css'> 
     body{ 
      margin: 0px; 
      padding: 0px; 
     } 
     #container{ 
      height: 100%; 
      background-color: black; 
     } 
     #logo{ 
      margin: 25px auto auto auto; 
      width: 360px; 
      height: 45px; 
      background-color: goldenrod; 
     } 
    </style> 
</head> 
<body> 
    <div id='container'> 
     <div id='logo'> 
      <p>logotext.</p> 
     </div> 
    </div> 
</body> 
</html>

だからより多くのあなたは、余裕のトップ値、さらにページダウン#logo両方とドラッグを取得#containerを調整します。 #containerは入れたままにして#logoはページを下に移動する必要があります。

出典

2011-12-16 mikemcg

テスターのためのフィドルです。 #logoで25ピクセルの余白を調整し、黒いバーもページ下に移動する方法に注意してください。 http://jsfiddle.net/bzVgV/1/ – mrtsherman

これは、余白が崩れることが原因です。 2つの要素が接触マージンを持つ場合、マージンがマージされます。このhereの大きな説明があります。 [Collapsing Margins Between Parent and Child Elements]セクションに移動します。

ここには3つの異なる解決策があります。

1つは、容器にoverflow: autoを追加することです。これにより、BCF（Block Formatting Context）が変更されます。この技術は、より詳細にはhereに記載されている。

#container { 
    height: 100%; 
    background-color: black; 
    /* Add oveflow auto to container */ 
    overflow: auto; 
}

http://jsfiddle.net/bzVgV/20/

秒ではなく、ロゴの余白のコンテナに詰め物を使用することです。これは、方程式の余白を取る。

#container { 
    height: 100%; 
    background-color: black; 
    /* Use padding on container instead of margin on logo */ 
    padding-top: 30px; 
}

http://jsfiddle.net/bzVgV/18/

最終的な解決策は、マージンはもはやタッチを作ることです。 1pxのパディングを親に追加することでこれを行うことができます。ここで

#container { 
    height: 100%; 
    background-color: black; 
    /* Now margins of container and logo won't touch */ 
    padding-top: 1px; 
}

http://jsfiddle.net/bzVgV/21/

出典

2011-12-16 04:26:06 mrtsherman

折りたたみマージンは私が今まで見た中で最も奇妙なものです。しかし、何が起こっているのかを知ることは素晴らしいことです。ご協力ありがとうございました！ – mikemcg

答えをより完全にするために、浮動小数点要素にもこの問題はありません。これはマージンをleft-and-margin-rightに設定するため、ここでは適用されませんが！ – Mohsenme

コンテナdiv内のdivの余白部分を調整するdiv内コンビネーションコンテナとコンテナdivの両方をボディから押し出す

答えて

関連する問題