Q:

Margin goes outside div when border is removed

Derived from an actual problem with borders and margin on my site I have made this test example which I think acts a little strange:
<!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>

Why does the top margin on ".inner" move "outside" when the border-top is removed in #outer-2? I would have thought the red border would have stayed inside the blue and green areas at relatively the same spot? but it doesn't.
Why? and is there a way to have it to look like I had imagined?

A:

Your problem is that margins are exactly what the name states: they set margins to other elements, not positioning offsets. If two elements are next to eachother, with different margins, they will be placed the highest margin apart, that way both margins are satisfied. In this case, 2 margins are present with nothing separating them, so logically they collapse.
Using padding on the .outer should solve this, or relative positioning. Margins are stricly for maintaining distances to other elements.

A:

Because margins are evil (and tend to collapse -> is it a bug? margins of P element go outside the containig div). In your case you can simply add overflow:hidden; to .outer
http://jsfiddle.net/yhAaQ/

