Search code examples
csshtmlgaps-in-visuals

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

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...

Solution

  • 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.