Css margin-top vs margin-bottom

If you have a sequence of block elements and you wanted to place margin in between them.

Which do you prefer, margin-top or margin-bottom or both? Why?

From stackoverflow

• I always use margin bottom, which means there is no unnecessary space before the first element.

• This really depends on what you're designing it for and why.

  Something you could do, which is helpful, is setup generic styles for default padding/margins you commonly will be using, and then just append the style needed to the element as needed.

  Like so:

  .bottom10 { margin-bottom: 10px; }
  .top10    { margin-top: 10px;    }
  
  <div class="myclass top10">...</div>
  

  CSS will let you apply multiple values to an object and this is very reusable.

  EDIT:

  Keep in mind, this is still better than inline styles, and it also allows you to give more flexibility to your CMS or templating system.

  Cheers!

  BlaM : If you start doing THAT (defining style in your markup), you might as well use the style attribute.

  thismat : It's an example, they would both reside in their separate folders. Using generic styles is never a bad thing when it saves you bloating your CSS and it also makes universal changes simpler when you're templating.

• Depends on context. But, generally margin-top is better because you can use :first-child to remove it. Like so:

  div.block {
      margin-top: 10px;
  }
  
  div.block:first-child {
      margin-top: 0;
  }
  

  This way, the margins are only in between the blocks.

  Only works for more modern browsers, obviously.

  thismat : Keep in mind that pseudo elements like this tend to break in older browsers.

  ken : does this work on IE<=6

  thismat : I've had trouble with pseudo classes like this before, and tend to shy away from them until more modern browsers become the "old".

  thismat : http://www.satzansatz.de/cssd/pseudocss.html - More research might help you, but from quickly googling I don't see anything too promising that doesn't involve a hack.

  sblundy : You're targeting IE 6 and earlier? That'll make things ugly no matter what you do.

  Andy Ford : @Ken - No, the :first-child pseudo element does not work in IE6 and below (does anyone still target ie5? if so, sucks to be you). However it does work in ie7, Firefox, Safari, Opera, and Chrome. You can target first-child and last-child via jquery (& probably any other js lib, or with plain js)

• @This Mat - I disagree with your approach. I would assign spacing on elements in a semantic fashion, and use contextual selectors to define behavior for that collection of elements.

  .content p { /* obviously choose a more elegant name */
     margin-bottom: 10px;
  }
  

  Naming classes after their behavior instead of their content is kind of a slippery slope, and muddies up the semantic nature of your HTML. For example, what if in one area of your page, all elements with class .top10 suddenly needed 20 pixels instead? Instead of changing a single rule, you would have to create a new class name, and change it on all the elements you wanted to affect.

  To answer the original question, it depends entirely on how you want elements to stack. Do you want extra space at the top or the bottom?