White space at top of page

Question

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    lt  DOCTYPE html gt    the white space goes away   Here is my main layout   lt  DOCTYPE html gt   lt html lang  en  gt   lt head gt       lt meta charset  utf-8    gt       lt title gt Title lt  title gt       lt link href    favicon ico  rel  shortcut icon  type  image x-icon    gt       lt meta name  viewport  content  width device-width    gt       RenderSection  Css   false   lt  head gt    lt body gt       RenderSection  JavaScript   false   lt  body gt   lt  html gt

User · Answer

Check for any webkit styles being applied to elements like ul  h4 etc  For me it was margin-before and after causing this   -webkit-margin-before  1 33em  -webkit-margin-after  1 33em

User · Answer

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

User · Answer

Aside from the css reset  I also added the following to the css of my div container and that fixed it    position  relative  top  -22px

User · Answer

overflow  auto  Using overflow  auto on the  lt body gt  tag is a cleaner solution and will work a charm

User · Answer

If nothing of the above helps  check if there is margin-top set on some of the  some levels below  nested DOM element s    It will be not recognizable when you inspect body element itself in the debugger  It will only be visible when you unfold several elements nested down in body element in Chrome Dev Tools elements debugger and check if there is one of them with margin-top set   The below is the upper part of a site screen shot and the corresponding Chrome Dev Tools view when you inspect body tag    No sign of top margin here and you have resetted all the browser-scpecific CSS properties as per answers above but that unwanted white space is still here      The following is a view when you inspect the right nested element  It is clearly seen the orange ish top-margin is set on it  This is the one that causes the white space on top of body element      On that found element replace margin-top with padding-top if you need space above it and yet not to leak it above the body tag   Hope that helps

User · Answer

Try this  html  body     margin  0    padding  0    height  100

User · Answer

This particular answer shows that h1 elements have an implicit margin-top that can cause the whitespace https   stackoverflow com a 20021854 2129219 The suggestion to remove it is helpful  and certainly eye opening to how this is happening h1   margin-top  0

User · Answer

There could be many reasons that you are getting white space as mentioned above   Suppose if you have empty div element with HTML Entities also cause the error   Example    lt div class  sample  gt  amp nbsp  lt  div gt    Remove HTML Entities   lt div class  sample  gt  lt  div gt

User · Answer

Old question  but I just ran into this   Sometimes your files are UTF-8 with a BOM at the start  and your template engine doesn t like that   So when you include your template  you get another  invisible  BOM inserted into your page      lt body gt  INVISIBLE BOM HERE     lt  body gt    This causes a gap at the start of your page  where the browser renders the BOM  but it looks invisible to you  and in the inspector  just shows up as whitespace quotes   Save your template files as UTF-8 without BOM  or change your template engine to correctly handle UTF8 BOM documents

User · Answer

I Just put CSS in my  lt div gt  now working in code  position  relative  top  -22px

[html] White space at top of page

Examples related to html

Examples related to css

Examples related to asp.net-mvc-4

Examples related to razor