Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

White space at top of page

I have about 20 pixels of white space at the top of my page. I have inspected every element and nothing has padding or margin in this area. When I inspect the body element it does NOT include this space. When I inspect the html element is does include this space. Also if I delete

<!DOCTYPE html> 

the white space goes away.

Here is my main layout

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="utf-8" />     <title>Title</title>     <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />     <meta name="viewport" content="width=device-width" />     @RenderSection("Css", false) </head>  <body>     @RenderSection("JavaScript", false) </body> </html> 
like image 958
dan_vitch Avatar asked Sep 12 '13 18:09

dan_vitch


People also ask

Why is there extra white space at the top of my HTML email?

Looks like you need more of a CSS reset for your email. This should eliminate the extra space at the top in most clients (Still gonna get a little space in Win Outlook, nothing we can do about that) and negate a few random breakages in clients.

Why is there white space in my website?

The purpose of micro white space is to improve the legibility and readability of your content.

How do you leave the space at the top of the page in HTML?

As others have noted, you use margin-top to add space to the top. Padding is used to add space inside. If you set padding to say 25px, if you put text into that box it would be 25 pixels away from the edges.


1 Answers

Add a css reset to the top of your website style sheet, different browsers render some default margin and padding and perhaps external style sheets do something you are not aware of too, a css reset will just initialize a fresh palette so to speak:

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, caption {     margin: 0;     padding: 0;     border: 0;     outline: 0;     font-size: 100%;     vertical-align: baseline;     background: transparent; } 

UPDATE: Use the Universal Selector Instead: @Frank mentioned that you can use the Universal Selector: * instead of listing all the elements, and this selector looks like it is cross browser compatible in all major browsers:

* {         margin: 0;         padding: 0;         border: 0;         outline: 0;         font-size: 100%;         vertical-align: baseline;         background: transparent;     } 
like image 128
Brian Ogden Avatar answered Oct 12 '22 02:10

Brian Ogden