Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Strange extra top space in body [duplicate]

Tags:

html

css

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;
}
like image 446
Razor Storm Avatar asked Sep 28 '11 20:09

Razor Storm


People also ask

How do I get rid of top margin?

You can remove this margin by setting the top and left margin to zero. Like the padding and border, the sizes of specific sides of the margin can be set using margin-left , margin-right , margin-top , and margin-bottom .

Why is there white space at the top of my website?

If you're using a layout that includes your theme's styling, it's possible that you see some space or a 'gap' between your header and where your content starts, or between your content and the footer of your page. This space is actually a part of your theme's layout.

How do I get rid of the extra space at the top in HTML?

Approach 1: We can remove space between any two tags by simply using margin-bottom property. The margin-bottom property sets the bottom margin of an element. We will assign a negative value to the margin-bottom of a particular tag to eliminate the extra space between the tags as shown.


Video Answer


4 Answers

Try this in css:

h1 {
    margin-top: 0;
}

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

enter image description here

like image 190
Rene Pot Avatar answered Sep 23 '22 14:09

Rene Pot


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

like image 31
Jon Newmuis Avatar answered Sep 24 '22 14:09

Jon Newmuis


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

Try this...

h1 {
    margin: 0;
}
like image 21
Sparky Avatar answered Sep 24 '22 14:09

Sparky


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; }
like image 42
swatkins Avatar answered Sep 22 '22 14:09

swatkins