Air-gap between top of page and first divs on page

Question

here's sample html:

<style type="text/css">
.column
{
float: left;
width:33.3%;
}

#container
{
text-align: center; 
width:100%;
}

.clearfix 
{
display: inline-block; 
}
</style>
<div id="container" class="clearfix">
      <div class="column">left</div>
      <div class="column">middle</div>
      <div class="column">right</div>
</div>

I was wondering why in this situation and situations similar, there is a gap between the top of the page in most (all?) browsers and the divs containing the text. I know I could do a "top:-y px" but I know im doing something wrong...

Answer 1

Some (most) browsers add default padding, margin and borders unless you specify otherwise. Make sure you prevent this by doing:

html, body { margin: 0px; padding: 0px; border: 0px; }

And then taking it from there on your terms. Here's an explanation of default browser behaviour.