Blank space on top of website in Firefox, but not in Safari

Question

I have made a simple web page. I can see no blank space when I open the website on safari, but on firefox, there is a gap that is probably 30px tall.

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;
}

Possible duplicate of [CSS margin terror; Margin adds space outside parent element](https://stackoverflow.com/questions/13573653/css-margin-terror-margin-adds-space-outside-parent-element) — showdev, Jul 21 '17 at 00:38

score 0 · Answer 1 · answered Jul 21 '17 at 00:35

0

You need to remove the margin on the heading as well. For example:

body, h1 {
    margin: 0;
}

body, h1 {
  margin: 0;
}

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

answered Jul 21 '17 at 00:35

j08691

204,283
31
260
272

score 0 · Answer 2 · answered Jul 21 '17 at 00:38

0

You could make it easy for yourself and reset all margins/paddings in your CSS (won't affect elements);

* {
    margin:0;
    padding:0;
}

answered Jul 21 '17 at 00:38

Jeppesen

64
5

What do you mean by "won't affect elements"? – j08691 Jul 21 '17 at 00:40
Like buttons and the like. – Jeppesen Jul 21 '17 at 00:41

score 0 · Answer 3 · answered Jul 21 '17 at 00:38

0

Certain browsers will put margin around header tags. It's always a good idea to include a reset.css file on your site so that things appear how you want them to cross browsers.

Here's a simple reset.css file for you to include.

answered Jul 21 '17 at 00:38

jas7457

1,712
13
21

Blank space on top of website in Firefox, but not in Safari

3 Answers3