CSS Margin 0 is not setting to 0

Question

I m a new comer to web designing  I created my web page layout using CSS and HTML as below  The problem is even though i set the margin to 0  the upper margin is not setting to 0 and leaves some space  How can i clear this white space   Screen Shot of the problem    Style Sheet   lt style type  text css  gt  body         margin 0 auto       background  F0F0F0     header      background-color  009ACD       height 120px     header content        width 70        background-color  00B2EE      height 120px       margin 0 auto      text-align center     content             width 68            background-color  EBEBEB          margin 0 auto           padding 20px    lt  style gt    HTML   lt body gt       lt div id  header  gt        lt div id  header content  gt              lt p gt header content lt  p gt          lt  div gt       lt  div gt   lt div id  content  gt  Main Content  lt  div gt   lt  body gt    Here s the whole file   lt  DOCTYPE html PUBLIC  -  W3C  DTD XHTML 1 0 Transitional  EN   http   www w3 org TR xhtml1 DTD xhtml1-transitional dtd  gt   lt html xmlns  http   www w3 org 1999 xhtml  gt   lt head gt   lt meta http-equiv  Content-Type  content  text html  charset utf-8    gt   lt title gt Book Shop lt  title gt   lt style type  text css  gt  html  body   header       margin  0  important      padding  0  important    body         margin 0     padding  0      background  F0F0F0     header      background-color  009ACD       height 120px     header content        width 70        background-color  00B2EE      height 120px       margin 0 auto      text-align center     content             width 68            background-color  EBEBEB          margin 0 auto           padding 20px    body      margin  0     padding  0     lt  style gt   lt  head gt    lt body gt     lt div id  header  gt        lt div id  header content  gt              lt p gt header content lt  p gt          lt  div gt       lt  div gt   lt div id  content  gt  Main Content  lt  div gt    lt  body gt   lt  html gt

User · Answer

Try body       margin  0      padding  0     instead of  body       margin  0      padding  0     Do not select body with class selector

User · Answer

h1   margin-top 0  padding-top  0     It  s just a misunderstanding with h1 tag  You have to set h1 tag margin-top and padding-top to 0  zero

User · Answer

It seems that nobody actually read your question and looked at your source code  Here s the answer you all have been waiting for    header content p       margin-top  0      jsFiddle

User · Answer

I just started learning CSS today and encountered the same problem and I think You don t need to reset style of all HTML tags  You need to reset default margin of top HTML You used  which is paragraph tag  And I know this is old question  but maybe my solution below will help somebody   Try this   body         margin  0       background  F0F0F0    p      margin  0

User · Answer

You need to set the actual page to margin 0 and padding  0 to the actual html  not just the body   use this in your css stylesheet      html       margin 0      padding 0        that will set the whole page to 0  for a fresh clean start with no margin or paddings

User · Answer

Try  html  body    margin 0  important    padding 0  important

User · Answer

It s very simple  just add this to the body - body  margin 0  padding 0  overflow hidden

User · Answer

Just use this code at the Start of the main CSS                        margin  0             padding  0              The above code works in almost all Browsers

User · Answer

you should have either  or both     a paddding    0 on body a margin   0 on  header    try   html   header       margin  0  important      padding  0  important      The margin is the  space  outside the box  the padding is the  space  inside the box  between the border and the content   The  important prevent overriding of property by latter rules

User · Answer

After reading this and troubleshooting the same issues  I agree that it is related to headings  h1 for sure  havent played with any others   also browser styles adding margins and paddings with clever rules that are hard to find and over-ride   I have adapted a technique used to apply the box-sizing property properly to margins and paddings  the original article for box-sizing is located at CSS-Tricks    html   margin  0  padding  0         before    after   margin  inherit  padding  inherit      So far it is exactly the trick for not using complex resets and makes applying a design much easier for myself anyways  Hope it helps

User · Answer

add this code to the starting of the main CSS      html body    margin 0  important    padding 0  important    box-sizing  border-box  important

User · Answer

Try     body      margin  0     padding  0      jsFiddle   Because of browsers using different default stylesheets  some people recommend a reset stylesheet such as Eric Meyer s Reset Reloaded

[html] CSS Margin: 0 is not setting to 0

Examples related to html

Examples related to css

Examples related to margin