开发者

Strange extra top space in body [duplicate]

This question already has answers here: How to remove margin space around body or clear default css styles (7 answers) Closed 3 years ago. 开发者_如何学运维

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


Try this in css:

h1 {
    margin-top: 0;
}

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

Strange extra top space in body [duplicate]


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


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


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

Try this...

h1 {
    margin: 0;
}


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.


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

Hope it will help someone :)


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!


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


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.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜