Margin goes outside div when border is removed

Question

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:

Answer 1

body{/* just a reset to simplify example */
    padding:0;
    margin:0
  }
  .inner {
    margin-top:40px;
    height:40px;
    width:40px;
    background-color:blue;
  }
  #outer{
    background-color:green;
    height:60px;
    width:60px;
  }

  

    

      

        

          test
        
      
    
  

Above code is a more general case of the problem you mentioned. All .inner are having margin-top=40px in CSS. But in reality, since there is no border involved, all the margins just collapse down to one final margin of 40px which "bubble up" outside of root parent.