Question

我设置了一个简单的网页，顶部有一个奇怪的空白，我不知道如何修复。我开发的其他网站根本没有这个问题..？

这是我的HTML：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>sitename</title>
<link rel="stylesheet"  type="text/css" href="main.css">
</head>

<body>
<div id="wrapper">      
    lorem ipsum
</div>
</body>
</html>

CSS：

body {
background-color:#323232;
}

#wrapper {
width:960px;
margin:0pt auto;
background-color:#272727;
}

这是一张奇怪的差距：

这只是我的FireFox版本暂时表现还是我做了明显错误的事情？

Answer 1

我认为默认情况下，浏览器会向<html>或<body>元素添加边距或填充，我永远无法记住它。

修改，根据其他答案和评论（例如Rahool’s），在margin上看起来像<body>。

所以这应该解决你的问题：

body {
    margin: 0;
}

Answer 2

因为body标签的默认边距，您需要重置它，例如：

body {
    margin: 0;
}

Answer 3

对于每个网页，每个网页浏览器使用一组默认样式之前应用任何其他css样式。

Mozilla default style sheet

Internet Explorer User Agent Style Sheets

您需要重置这些默认css应用的样式。

Firefox将默认的8px边距应用于body元素。要重置它，

body {
    margin: 0;
}

Answer 4

尝试添加

*{
    margin: 0px;
    padding: 0px;
}

基本网页顶部的差距？

4 个答案: