出现 CSS 未知边距/填充

Question

我的标题导航 ID 标签之间似乎有未知的边距或填充。

这里是 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

另一种解决方法是设置负边距顶部值。但是为什么以及如何存在呢？

Answer 1

始终使用重置样式

* {
    margin: 0;
    padding: 0;
}

使用 CSS 重置，CSS 作者可以强制每个浏览器都将其所有 样式重置为空，从而尽可能避免跨浏览器的差异 尽可能。

更高级的 CSS 重置。

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

固定：demo

Answer 2

就像我在评论中所说，它来自您的<p> 标签。以下应该解决它。

你可以像这样摆脱它：

#container p {
    margin: 0;
}

DEMO HERE

Answer 3

进入css

* {
    margin:0;
    padding:0;
}

Answer 4

像这样

demo

css

*{
    margin:0;
    padding:0;
}
body{
    margin:0;
    padding:0;
}