Why is there a gap on the top of my webpage?

Question

I'm sure the answer is obvious, but I haven't been working with html/css that much...

There is a gap of white space in between the top of the browser and the first div. I don't really get why the gap is there. I didn't use margin-top or padding-top or border-top in the css, so why is there a gap?

Thanks!

Show some html/css so we can figure out what you are talking about. — Ryan, Jun 25 '11 at 04:45
Can you add some minimal amount of html/css to the question to repro the problem before you accept an answer? Your question will be worth an upvote then, IMO. — Merlyn Morgan-Graham, Jun 25 '11 at 05:00

score 10 · Accepted Answer · answered Jun 25 '11 at 04:47

While it would be extremely helpful if you actually posted some code or a link to the site, I would assume it's just the default padding. Most browsers have default styles for things like body that you may want to clear. Try something like this:

html, body{
   padding: 0;
   margin: 0;
}

If that doesn't fix it you'll need to give more information.

score 2 · Answer 2 · answered Jun 25 '11 at 04:48

2

Without seeing anything I'd imagine you either need to clear the default padding on the body element or you have a heading tag in that div that is adding some extra goodness.

Are you using a reset? http://meyerweb.com/eric/tools/css/reset/

answered Jun 25 '11 at 04:48

Seth

6,240
3
28
44

score 1 · Answer 3 · answered Jun 25 '11 at 04:49

1

if the page is wrapped with a wrapper, use:

 #wrap{
     margin:0 auto;
     padding:0
 }

answered Jun 25 '11 at 04:49

bingjie2680

7,643
8
45
72

score 0 · Answer 4 · answered May 18 '20 at 21:34

I had the same problem. It was fixed when I added 30px of padding to my div container. I used

   .top-container {
       padding-top: 30px;
    }

My problem happened after I set some images to an absolute position in my div (which had a position of relative.) For some reason that gap appeared, but setting the padding worked for me.

score 0 · Answer 5 · answered Aug 03 '20 at 16:22

0

I know this is 9 years old but... body { margin:0; } type that in between the Tags and it should work

answered Aug 03 '20 at 16:22

OpenAviator

1

First containing element will need their top margin set to zero e.g.
...
– Daniel S. Fowler Aug 03 '20 at 18:01

score 0 · Answer 6 · answered Jun 25 '11 at 05:13

0

Once again, some context would be nice but if these solutions aren't cutting it, then there's a good change your a victim of collapsing margins. Try setting the overflow property of the body to auto

answered Jun 25 '11 at 05:13

Marlin

751
4
8

score 0 · Answer 7 · answered Nov 04 '11 at 21:18

0

I had the same problem. Floating the upper divs solved it.

answered Nov 04 '11 at 21:18

1qazxsw2

2,589
4
20
19

Why is there a gap on the top of my webpage?

7 Answers7

Linked