如何删除 div 和页面顶部之间的空间？

Question

新手上路，请多包涵

这可能被问过一百万零一次，但如果有人能向我解释 div 的行为，我将不胜感激。

我有一个容器 div，我在页面的中心对齐它，它在页面的顶部和顶部之间有一个间隙。我希望它与页面顶部齐平。我假设我需要删除某种边距或填充，但我想不出它可能是什么。即使 div 中没有任何内容，仍然存在差距。

     <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;
}

这是一个 JSFiddle ，可以让您了解我的意思。

有人可以解释为什么 div 被按原样向下推吗？有没有不影响放在 div 中的任何内容的可靠解决方案？

注意：如果屏幕宽度小于 div 宽度，左侧也会有间隙。