CSS未知边距/填充显示

这是div标签：

<div id="container">

     <div id="header">
          <p align="center">HEADER</p>
     </div>

     <div id="navi">
          <p align="center">NAVIGATION</p>
     </div>

</div>

随之而来的样式表：

#container
{
    width: 800px;
    background-color: #AFAF97;
    margin: 0px auto;
}

#header
{
    height: 75px;
    width: 100%;
    background-color: #888888;
}

#navi
{
    height: 50px;
    width: 100%;
    background-color: #aaaaaa;
    /*margin-top: -16px;*/
}

这是未知边距/填充的屏幕截图.
http://imgur.com/l37DVFc

另一种解决方法是设置负的保证金最高值.但为什么以及如何呢？

你可以摆脱它：

#container p {
    margin: 0;
}

DEMO HERE