Margines wychodzi poza div, gdy granica jest usuwana

Question

Apr 12, 2013, 10:03 PM

Margines wychodzi poza div, gdy granica jest usuwana

Pochodzę z rzeczywistego problemu z granicami i marginesem na mojej stronie. Zrobiłem ten przykład testu, który moim zdaniem działa trochę dziwnie:

<!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>

Dlaczego górny margines „.inner” przesuwa się „na zewnątrz”, gdy górna granica jest usuwana w # outer-2? Myślałem, że czerwona granica pozostanie w niebieskich i zielonych obszarach w tym samym miejscu? ale tak nie jest.

Czemu? i czy istnieje sposób, aby wyglądał tak, jak sobie wyobrażałem?