全宽 header 无效

Question

我想在我的页面顶部制作黑色的全宽 (100%) header，问题是它周围有一个边框，这不是黑色我在做什么错了？

这是我的代码 (html):

<head>

    <link rel="stylesheet" type="text/css" href="mainColorTest.css" />
    <title>Home Color Test</title>

    <div id="header">
    </div>

</head>

这是我的代码 (css):

body {
    background-color: #ffbc36;
    background-image: url('BackgroundWhiteMid.png');
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
}

#header {
    width: 100%;
    height: 200px;
    background-color: #000000;
    float: left;
}

Answer 1

你身上可能有余量，

尝试添加

margin: 0px;

到

body {
 margin: 0px;
 ...
}

大多数浏览器在 body 和其他标签上都有一些默认的 css 值。您可以通过使用 css 重置来避免将来遇到此类行为的问题。

例如 http://meyerweb.com/eric/tools/css/reset/

Answer 2

添加此样式：

body {
    margin: 0;
}

浏览器通常会给正文添加边距，这样内容就不会卡在边框处。请参阅您的示例 fiddle。

Answer 3

正文（以及其他一些 html 元素）有默认边距。这就是边界的原因。

全宽 header 无效

Full width header won't work

html

css

size

background

header