body要素を押すCSSマージン

div要素のマージンを設定していますが、body要素もそのマージンを取得しています。body要素を押すCSSマージン

は、このコードを考えてみましょう：

<!-- HTML --> 
<body> 
    <div> 
    </div> 
</body> 

<!-- CSS --> 
<style> 
    html,body { 
    height:100%; 
    margin:0; 
    padding:0; 
    outline:1px solid blue; 
    } 

div { 
    margin:20px; 
    outline:1px solid red; 
} 

</style>

これは、結果、問題である：

これまでのところ私は、body要素にborder:1px solid transparent;プロパティを追加することで問題を解決してきました。 1pxボーダーのためにスクロールバーが表示されるため、これは100％の高さを失います。なぜこれが起こるのですか？

POSSIBLE SOLUTION（助けてくれてありがとう）：padding-top:1pxを追加し、margin-top:-1px、このように100％の高さは、スクロールバーを台無しに取得していないし、あなたのアール回避余裕が崩壊。

出典

2011-10-12 Rich

あなたは何DOCTYPEを使用していますか？ – PseudoNinja

<！doctype html> – Rich

ベストソリューションはおそらく@Chris Nicholsonが提供するリンクのように、親に 'overflow：auto;'を追加することです – jamietelin

これは私が持っていた問題に似て聞こえる：Margins and negative margins。私は境界よりむしろパディングトップを置くことで私の夢を解決した。それ以外の場合は、次のリンクを試してください。http://www.seifi.org/css/understanding-taming-collapsing-margins-in-css.html

出典

2011-10-12 15:43:56 Chris

これは、折りたたみ余白として知られている効果が原因です。

特定の隣接マージンが結合して1つのマージンを形成します。それらのマージンは「崩壊する」と言われています。非空のコンテンツ、パディング、境界領域、またはそれらを分離するクリアランスがない場合、マージンは隣接しています。

http://www.w3.org/TR/css3-box/#collapsing-margins

出典

2011-10-12 15:45:29 Jrod

body要素を押すCSSマージン

答えて

関連する問題