CSSボーダーに関するマージンを理解する

私はいくつかのhtmlコードを見て回ったときに見た振る舞いを理解しようとしています。hereが表示されます。CSSボーダーに関するマージンを理解する

あなたは以下を変更した場合ことがわかります。これに

<div style="border: solid 1px black;"> 
    <div style="margin-top:50px;"> 
     Post Title 
    </div> 
</div>

（。すなわち、 "国境：固体1pxの黒;" "国境：固体0PX黒;" へ）：

<div style="border: solid 0px black;"> 
    <div style="margin-top:50px;"> 
     Post Title 
    </div> 
</div>

内側のdivの余白は外側のdivにもう影響しません。私はこの動作を定義するW3.org仕様を見出そうとしていましたが、運はありません。誰も助けたい？

出典

2011-11-19 Nadir Muzaffar

これを回避するために 'border：1px solid transparent'を使用することがあります。しかし、それは気になります。正直な理由で私の気持ちいい詰め物を崩壊させないでください。 –

ええ、私はそれを正確にしなければなりませんでした。それは正直に迷惑です。私がこの動作を定義するW3仕様を徹底的に検討している理由です。 –

これは「折りたたみ余白」と呼ばれます。

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

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

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

いくつか簡単に

出典

2011-11-19 23:13:11 thirtydot

私はそれを感じていましたが、私は "境界崩壊：別れ"を試みました。それが機能しなかったので、私は崩壊した国境が理由ではないと考えました。なぜあなたは知っていますか？ –

あなたの例は、[here]（http://www.w3.org/TR/css3-box/#collapsing-margins）で説明されている最初の2つの例とほとんど同じです。 – thirtydot

確かに、これは実際には答えです –

CSSボーダーに関するマージンを理解する

答えて

関連する問題