0

我正在学习 HTML 和 CSS，我想创建一个具有银色背景颜色的固定宽度页面。我还希望固定宽度区域之外的背景颜色为黑色。

问题是固定宽度区域上方（标题上方）有一个小的黑色间隙，我想删除这个黑色间隙，以便将其替换为银色。

我该如何解决这个问题？

HTML：

<!DOCTYPE html>
<html>
    <head>
        <title>Welcome to my Homepage</title>
        <link href="style.css" rel="stylesheet" type="text/css">
    </head>

    <body>
        <div class="main">
            <h1>Welcome to my homepage.</h1>
            <p>This is just a test.</p>
        </div>
    </body>
</html>

CSS：

body {background-color: #000000;}
.main {
    width: 640px;
    margin: 0 auto;
    background-color: silver;
}
4

4 回答 4

7

尝试

body {padding:0; margin:0; background-color:#000; }
于 2012-10-14T12:22:21.080 回答
0

尝试：

border-width:0px;

边框和边距是两个不同的东西......这是给你的一张好照片：

http://dev.opera.com/articles/view/30-the-css-layout-model-boxes-border/

于 2012-10-14T12:23:22.807 回答
0

您可以执行以下操作：

body {margin:0; padding: 0; background-color:#000; } 

.main {   
position: absolute;
width: 640px;    
left: 50%;
margin-left: -320px;
background-color: silver; 
}
于 2012-10-14T12:34:29.610 回答
0

这样的问题在编写 HTML 和 CSS 时会很常见，这是一个备受争议的话题，但我强烈建议您使用重置样式表。

所有浏览器都有自己的一套关于如何在网页上显示元素的规则，重置样式表可以最大限度地减少浏览器特定样式的影响，这意味着您的代码阅读起来更加合乎逻辑并且更容易发现正在发生的事情尤其是当您遇到问题时。也就是说，即使使用重置样式表，您也应该始终跨浏览器检查项目，因为总会有怪癖。

这是使用最广泛的重置样式表之一。

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

只需将其粘贴到您的 style.css 表上的网站 CSS 上方，或创建一个名为 reset.css 的新样式表并在您的 site.css 之前引用它。

于 2012-10-14T12:50:11.593 回答