3

我的标题导航 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

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

4

4 回答 4

4

始终使用重置样式

* {
    margin: 0;
    padding: 0;
}

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

更高级的 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;
}

固定：演示

于 2013-10-21T07:25:35.057 回答
2

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

你可以像这样摆脱它：

#container p {
    margin: 0;
}

在这里演示

于 2013-10-21T07:07:27.267 回答
1

进入CSS

* {
    margin:0;
    padding:0;
}
于 2013-10-21T07:20:07.717 回答
0

像这样

演示

css

*{
    margin:0;
    padding:0;
}
body{
    margin:0;
    padding:0;
}
于 2013-10-21T07:31:04.383 回答