Question

我制作了一个简单的网页。我在safari上打开网站时看不到空白区域，但是在Firefox上，有一个差距可能是30px高。

HTML：

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="stylesheet.css">
    </head>
    <body>
        <div style="background-color: blue;">
            <h1>hello</h1>
        </div>
    </body>
</html>

CSS：

body {
    margin: 0;
}

Answer 1

您还需要删除标题上的边距。例如：

body, h1 {
    margin: 0;
}

＆＃13;

body, h1 {
  margin: 0;
}

＆＃13;

<div style="background-color: blue;">
  <h1>hello</h1>
</div>

＆＃13;

Answer 2

您可以轻松自己并重置CSS中的所有边距/填充（不会影响元素）;

* {
    margin:0;
    padding:0;
}

Answer 3

某些浏览器会在页眉标记周围添加边距。在您的网站上包含reset.css文件总是一个好主意，这样就可以显示您希望它们如何跨浏览器。

Here's一个简单的reset.css文件供您包含。

Firefox中网站顶部的空白区域，但Safari中没有

3 个答案: