2

私のサイトのボーダーとマージンに関する実際の問題から派生したもので、このテスト例を作成しましたが、これは少し奇妙に動作すると思います。

<!DOCTYPE html>
<html>
    <head>
        <style>
            body {
                background-color:black;
            }

            .outer {
                width:100px;height:100px;

            }

            .inner {
                margin-top:40px;
                height:20px;
                border:1px solid red;
            }


            #outer-1 {
                background-color:blue;

                border-top:10px solid yellow; 
            }

            #outer-2 {
                background-color:green;

                border-top:none;
            }

            #sep {
                background-color:white;
            }

        </style>
    </head>
    <body>
        <div id="outer-1" class="outer">
            <div class="inner">
                CONTENT
            </div>
        </div>

        <div id="sep">TEST</div>

        <div id="outer-2" class="outer">
            <div class="inner">
                CONTENT
            </div>
        </div>  
    </body>
</html>

#outer-2 で border-top を削除すると、「.inner」の上部マージンが「外側」に移動するのはなぜですか? 赤い境界線は、青と緑の領域内の比較的同じ場所にとどまると思いましたか? しかし、そうではありません。

なんで？私が想像していたように見せる方法はありますか？

4

4 に答える 4

3

あなたの問題は、マージンがまさにその名前の状態であることです.マージンは、オフセットを配置するのではなく、他の要素にマージンを設定します. 2 つの要素が互いに隣り合っていて、マージンが異なる場合、両方のマージンが満たされるように、最も高いマージンを離して配置されます。この場合、2 つの余白が存在し、それらを隔てるものが何もないため、論理的にそれらは崩壊します。

.outer でパディングを使用すると、これ、または相対的な配置が解決されます。マージンは厳密には、他の要素との距離を維持するためのものです。

于 2013-04-12T20:08:20.963 に答える
1

outer2 要素の余白は、outer2 要素に上部余白を適用せずに、その上の要素の下部から計算されます。ただし、ボーダーを追加する場合は、ボーダーの下から計算されます。

また、下マージンと上マージンが互いに続く要素に適用されると、それらは折りたたまれます。これは、まさにボックス モデルが機能する方法です。

別の要素内の要素のオフセットを制御する場合は、パディングを使用します。

于 2013-04-12T20:11:44.420 に答える