Strange extra top space in body

Question

In this test page, the element has a strange extra amount of space on the top:

http://dl.dropbox.com/u/3085200/canvasTest/index.html

I tried putting margin, padding, top all to 0 for body, and padding to 0 for html, but none of it helped.

html
{
    padding:0px;
}
body
{
    margin:0px;
    padding:0px;
    top:0px;
}

Welcome to [Margin Collapsing](http://www.w3.org/TR/CSS2/box.html#collapsing-margins), enjoy your stay. — zzzzBov, Sep 28 '11 at 20:38
It seems the only benefit of this is wasting man hours debugging margin issues. Oh wait that's a drawback. -_- — Razor Storm, Sep 28 '11 at 20:39
most developers whom I've met, who dislike CSS, dislike it without understanding [why the box model is the way it is](http://stackoverflow.com/questions/4903549/why-do-the-css-width-and-height-properties-not-adjust-for-padding/4903697#4903697). Also, most have never read the [spec](http://www.w3.org/TR/CSS2/). It's not that hard, and definitely not a waste of your time. — zzzzBov, Sep 28 '11 at 20:44
I don't dislike CSS, I actually enjoy most of its decisions. I just couldn't understand the logic behind this one. =] The problem, is due to inconsistent implementations by different browsers, but, that is a problem with all standards. — Razor Storm, Sep 28 '11 at 21:08
Do you still have that code? If so, please edit it in. Your Dropbox link is dead so the question is useless now. — Palec, Mar 08 '15 at 23:23

score 36 · Accepted Answer · edited Aug 10 '17 at 10:56

36

Try this in css:

h1 {
    margin-top: 0;
}

This is a common scenario (logo image wrapped in h1 tag):

edited Aug 10 '17 at 10:56

trainoasis

6,419
12
51
82

answered Sep 28 '11 at 20:36

Rene Pot

24,681
7
68
92

That's a good one, thanks! – Bilger Yahov Oct 10 '19 at 10:22

score 13 · Answer 2 · answered Sep 28 '11 at 20:37

13

I believe this is actually caused by the margin on your h1 element.

answered Sep 28 '11 at 20:37

Jon Newmuis

25,722
2
45
57

score 2 · Answer 3 · answered Sep 28 '11 at 20:40

2

You <h1> has default margin-top added to it, so it's pushing the <body> down from the top of the window.

body > h1:first-child { margin-top: 0; }

answered Sep 28 '11 at 20:40

swatkins

13,530
4
46
78

score 2 · Answer 4 · answered Sep 28 '11 at 20:42

2

My console is showing a 0.67em top margin on the <h1> surrounding your top element.

Try this...

h1 {
    margin: 0;
}

answered Sep 28 '11 at 20:42

Sparky

98,165
25
199
285

score 0 · Answer 5 · answered Dec 23 '16 at 19:58

Well, I'm sure the experts will laugh at this. I started using Expression Web 4 and tried to place the header info for my pages into a file header.txt to include on every page. I changed the file type from html to shtml and used this line:

All okay, except for a pesky extra space at the top of the file.

The solution was this:

Tools>Page Editor Options>Authoring

Uncheck .txt under "Add a Byte Order Mark when creating or renaming UTF-8 documents with these file extensions."

I hope this helps someone else as naive as I.

score 0 · Answer 6 · answered Oct 14 '19 at 19:40

0

You can try to put a display flex on your body, it worked in my case

Hope it will help someone :)

answered Oct 14 '19 at 19:40

Bompard Paul

1

1

Can you add a code snippet showing how? – giusti Oct 14 '19 at 19:58

score 0 · Answer 7 · answered Oct 18 '19 at 14:28

0

I recognize that space at the top. This often happens to me too. In my case there is a hidden break (<br/>) somewhere between the <head> and <body>. When you find this break and remove it, the top space will be fixed!

answered Oct 18 '19 at 14:28

Lily-Jane

1

score -1 · Answer 8 · answered Aug 31 '14 at 05:42

-1

  html > h1:first-child { margin-top: 0; }

answered Aug 31 '14 at 05:42

Tilo

33,354
5
79
106

this didn't work for me, generally your `h1`s aren't going to be a direct descendent of `html` – worc May 02 '19 at 21:31

score -2 · Answer 9 · answered Mar 08 '15 at 22:49

I know this post is old, but I wanted to share a different solution that worked for me, for anyone that might come across this same post, looking for help, as I have.

Every solution I found seemed to be the result of an error, but I didn't have any errors, that could see. After over an hour of problem solving and piecing apart one of my past designs, I found this solution:

In the CSS for the DIV that you want attached to the top of the browser, add this one simple line:

#ContentContainer{

border: 1px solid transparent;

};

I'm not quite sure why it works or why it's needed, but it made the gap disappear.

I don’t see how this is related to the original question. The original code is unavailable now. While your problem might look similar, it is probably caused by something completely different. Please [ask] a new question if you need help. — Palec, Mar 08 '15 at 23:21

Strange extra top space in body

9 Answers9