Child margin adding margin to parent

Question

how if i have the following code : HTML :

    
Hello

         


        

Answer 1

Expected behavior in browsers is all too often unexpected .

What i really wanted to achieve by asking this question was not just get a solution to the problem but also actually know whats causing the problem .

which i eventually found in a thread not the same but similar and let me quote the part , that would solve the mystery :

The margins of the parent div and the h1 combine to form a single margin", even though they are nested, because they have adjoining margins with no padding or border between them.

and now coming to the solution well for me ,

overflow:hidden on the parent div worked just fine .

the same solution of course is high lighted by naeem in a earlier answer .

So heres the code : HTML :-

        
Hello

CSS:

html,body{
        height: 100%;
        width: 100%;
    }
    .home{
        background: #000;
        height: 100%;
    }
    .main{
        overflow: hidden; 
        height: 100%;
        background: pink;
    }

Here is the fiddle