Question

我正在学习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;
}

Answer 1

尝试

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

Answer 2

尝试：

border-width:0px;

边界和边距是两个不同的东西......这里有一个很好的图片：

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

Answer 3

你可以在下面做：

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

.main {   
position: absolute;
width: 640px;    
left: 50%;
margin-left: -320px;
background-color: silver; 
}

Answer 4

在编写HTML＆amp; amp;和/或CSS，这是一个激烈争论的主题，但我强烈建议你使用重置样式表。

所有浏览器都有自己的一套关于元素如何在网页上显示的规则，重置样式表有很长的路要走，以最大限度地减少浏览器特定样式的影响，这意味着您的代码在逻辑上读得更多，更容易发现特别是当你遇到问题时会发生什么。也就是说，即使使用重置样式表，您也应该始终通过浏览器检查项目，因为总是有怪癖。

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

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

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

如何删除<div>标记上方的空格？</div>

4 个答案: