Css margin-top vs margin-bottom

Question

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?

Answer 1

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

Answer 2

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!

Answer 3

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.

Answer 4

@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?