What is the gap for the header?

Question

I am trying to work out what the X and Y position is for the top left cornor of an element? For the main-container I believe it to be (8,8) however there is a gap between the maincontainer and header that I am unsure how to calculate this. Does the <header> element contain margins or padding within it?

header
{
     top: 0;
     left: 0;
     height: 100px;
     background-color: #ffffff;
}


#main-container
{
     position: absolute;
     top: 8px;
     left: 8px;
     background: #cccccc;
     height: 500px;
     width: 700px;
}

Answer 1

Try with this:

body{
 margin:0;
}

Or this Ugly reset:

*{margin:0;padding:0;}

Additionally some older browsers might need the display:block; defined for newer HTML5 tags (header, footer, section, article etc...).

Also, using top and left properties for header is useless
unless you use the position property ^{* Final Demo link}

Demo with issue || Demo without gap || Final Demo