CSSの最小高さが子要素の下マージンに追加されます

Question

私は非常に奇妙なCSSの問題を抱えてきました。一部のページで要素間に説明できない "スペース"が表示されています。コードを調べると、このスペースはどの要素にも属していないことがわかります。

私はそれを絞り込んだので、なぜこの問題が起こっているのか分かりました。しかし、私はボンネットの下で、なぜそれが起こっているのかを知りたがっていました。

問題は、私が思うに、#outerセレクタでmin-height: 50pxは、前述した原因不明のスペースになり#outer以下#innerの下マージンを追加することにあります。 height: 50pxと置き換えると、スペースが消えてしまいます。

これはChromeでは発生しますが、FireFoxでは発生しません。

私の理論では、ChromeのCSSが最初に要素をレイアウトし、最小高さの要件が満たされているかどうかをチェックします。そうでない場合は、divの高さを延長し、それに沿って「説明できないスペース」を押します。子要素の下のマージンをコピーまたは継承する必要があります。私はこれが下部マージンにしか起こらないと思う。

padding: 1px;を追加してoverflow: hidden;を追加すると、divの高さが原因で問題がなくなります。しかし、私はoverflow: hiddenの場合、オーバーフローしたコンテンツをより多くカットしていると思います。

しかし、私は何のCSSの専門家だ、このすべては、私が質問としてこれを提起したかった理由である、私の部分にだけ憶測です:)

ここでコード

#outer { 
 
    background-color: blue; 
 
    min-height: 100px; 
 
} 
 
#inner { 
 
    background-color: red; 
 
    height: 50px; 
 
    margin-bottom: 50px; 
 
} 
 
#bottom { 
 
    background-color: green; 
 
    height: 50px; 
 
}

<div id="outer"> 
 
    <div id="inner"> 
 
    </div> 
 
</div> 
 
<div id="bottom"> 
 
</div>

です

Answer 1

これが原因margin collapsingに発生 -になることを崩壊innerの具体margin-bottomouter要素の。

ソリューション：

は余裕の崩壊を防ぐためにborderからouter要素を与える - デモ下記参照：

#outer { 
 
    background-color: blue; 
 
    min-height: 100px; 
 
    border: 1px solid blue; 
 
} 
 
#inner { 
 
    background-color: red; 
 
    height: 50px; 
 
    margin-bottom: 50px; 
 
} 
 
#bottom { 
 
    background-color: green; 
 
    height: 50px; 
 
}

<div id="outer"> 
 
    <div id="inner"> 
 
    </div> 
 
</div> 
 
<div id="bottom"> 
 
</div>