Comment faire pour supprimer l'espace entre la div et le haut de la page?

Cela a probablement été posée un million de fois, mais je vous serais reconnaissant si quelqu'un pouvait expliquer le comportement des divs pour moi..

J'ai un div conteneur qui je suis en alignant dans le centre de la page, qui a un écart entre le haut et le haut de la page. Je veux qu'il soit à plat contre le haut de la page. Je suis en supposant qu'il existe une sorte de marge ou de remplissage que j'ai besoin de l'enlever mais je ne pense pas qu'il pourrait être. Même avec rien dans le div, il y a toujours un fossé.

    <body>
    <div id='mainContent'>

    </div>
</body>


body
{
    background-color:black;
    background-image:url("img/background.jpg");
    background-repeat:repeat;
}

#mainContent
{
    width:1200px;
    height:500px;
    background-color:#FFFFFF;
    margin-left:auto;
    margin-right:auto;
    margin-top:0px;
}

Voici un JSFiddle pour vous donner une idée de ce que je veux dire.

Quelqu'un peut-il expliquer pourquoi la div est poussé vers le bas comme il est? Est-il une solution robuste qui n'affecte pas tout le contenu qui est mis dans la div??

REMARQUE: Si la largeur de l'écran est plus petit que le div de largeur, il y a un écart sur le côté gauche aswell.

OriginalL'auteur user2630210 | 2013-11-06