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

【问题标题】：Blank space on top of website in Firefox, but not in SafariFirefox 中网站顶部的空白区域，但 Safari 中没有
【发布时间】：2017-07-21 00:31:03
【问题描述】：

我做了一个简单的网页。当我在 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;
}

【问题讨论】：

CSS margin terror; Margin adds space outside parent element的可能重复

标签： html css space

【解决方案1】：

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

body, h1 {
    margin: 0;
}

body, h1 {
  margin: 0;
}

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

【讨论】：

【解决方案2】：

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

* {
    margin:0;
    padding:0;
}

【讨论】：

“不会影响元素”是什么意思？
点赞按钮之类的。

【解决方案3】：

某些浏览器会在标题标签周围放置边距。在您的网站上包含一个 reset.css 文件总是一个好主意，这样事情就会以您希望它们跨浏览器的方式显示。

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

【讨论】：