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 settin

Answer 1

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

Answer 2

add this code to the starting of the main CSS.

*,html,body{
  margin:0 !important;
  padding:0 !important;
  box-sizing: border-box !important;;
}

Answer 3

Try

html, body{
  margin:0 !important;
  padding:0 !important;
}

Answer 4

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.

Answer 5

you should have either (or both):

1. a paffffding != 0 on body
2. 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.

Answer 6

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).