Where do you put your CSS Margins? [closed]

Answer 1

The point that Jim is making is the key. Margins collapse between elements, they are not additive. If what you want is to ensure that there is a 1em margin above and below paragraphs and headings and that there is a 1em margin below the header and above the footer, then your css should reflect that.

Given this markup (I've added a header and placed ids on the header/footer):

  

  
This is the heading
  
This is a paragraph
  
Here's another heading
  
This is a footer

You should use this css:

#header {
  margin-bottom: 1em;
}

#footer {
  margin-top: 1em;
}

h1, p {
  margin: 1em 0;
}

Now the order of your elements doesn't matter. If you use two consecutive headings, or start the page with a paragraph instead of a heading it will still render the way that you indended.