Q:

What is the Reason for Gap Between DIVs

I have a simple HTML page as shown below:
<html>
    <head>
        <style>
            BODY { margin:0px; padding:0px; background-color:#000000; color:#FFFFFF;}
            /*H1 { margin:0px; }*/
            .t-head { padding:10px; background-color:#0000FF; }
            .t-body { background-color:#FFFFFF; color:#000000; /*padding:10px;*/}
            .t-footer { padding:10px; background-color:#0000FF; color:#FFFFFF;}
        </style>
    </head>
    <body>
        <div class="t-head">Header content</div>
        <div class="t-body">
            <h1>Content Header</h1>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
            sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.  
            Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris 
            nisi ut aliquip ex ea commodo consequat.  Duis aute irure dolor in 
            reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla 
            pariatur.  Excepteur sint occaecat cupidatat non proident, sunt in 
            culpa qui officia deserunt mollit anim id est laborum. 
        </div>
        <div class="t-footer">Footer content</div>
    </body>
</html>

The body of the page has three parts - a header DIV (t-header), a body DIV (t-body) and a footer DIV (t-footer).   For ease of discussion, I've styled the background of the BODY to be black.   If you view this page in a browser, there is a gap (i.e. a horizontal band of black) between the header DIVand the body DIV.   This behavior is consistent across IE, Chrome and Firefox.   
I know the culprit of the gap - it's the margin of the H1 tag.   If you uncomment the H1 style from the styles section of the page, you'll see that the gap goes away.   Alternatively, you can leave the H1 style commented out and uncomment the padding style on the t-body class and the gap will go away.   What I don't understand is why the H1 margin causes a gap between the t-head DIV and the t-body DIV.   My understanding of CSS (which is obviously incorrect) is that the H1 margin should be calculated from the top of the t-body DIV.   I also don't understand why adding padding to the t-body DIV fixes the issue. 
Can anyone explain the reason why the H1 margin seems to be causing the gap between the t-head DIV and the t-body DIV?   ...also, why does adding padding to the t-body DIV resolve the problem? 

A:

The reason is collapsing margins. 
Look at this article, especially the chapter 'Collapsing Margins Between Parent and Child Elements': http://reference.sitepoint.com/css/collapsingmargins and you might see. 

You can cancel the collapsing margins by using overflowwith a different value than visible, e.g. overflow: hidden or overflow:auto. 
http://jsfiddle.net/5w4gp/
.t-body {
    overflow: auto;
}

If you don't like the overflow technique, you could add
.t-body {
    padding-top: 1px;
    margin-top: -1px;
}

to the .t-body. 
http://jsfiddle.net/68785/

There's also a third solution utilizing float and clear: http://jsfiddle.net/z2RNF/ 
.t-head {
    float: left;
    width: 100%;
}
.t-body {
    clear: both;
}

Why do these work?  They prevent the collapsing vertical margins to 'touch' each other. 
Here is the specification: http://www.w3.org/TR/CSS2/box.html#collapsing-margins

