Question

我试图在页面顶部用黑色制作一个全宽（100％）标题，问题是它周围有一个边框，这不是黑色我做错了什么？

这是我的代码（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;
 ...
}

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

e.g。 http://meyerweb.com/eric/tools/css/reset/

Answer 2

添加此样式：

body {
    margin: 0;
}

浏览器通常会在主体上添加边距，这样内容就不会卡在边框上。请参阅示例的fiddle。

Answer 3

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

全宽标题不起作用

3 个答案: