CSS margin opinion

I have two div’s, one on top of the other and they “touch”.
How do you deal with this?
Give bottom div margin-top or give top div margin-bottom?
Just curious if there was a best practise.

Hi there. I think the answer is going to depend on your design. Can you share your code or the site?

It all depends on situation but for static elements you can just use margin-bottom.

Remember that margins collapse so both elements may have top and bottom margins but only the greater margin wins out.

Also note for static elements that follow floated elements then the margin-top on the static element will slide under the float so a margin-bottom on the float would be better.

Collapsing margins are a complicated subject when you get into the detail but for static boxes as in your example then the choice is up to you. Generally I would give all similar containers a margin-bottom by default so that you remain consistent.

I have everything on localhost right now, I think about this every time I encounter this situation.
The site is responsive, my logic is I want to move the bottom div lower, so give the bottom div a margin-top:10px;
Just wondering how others approach this.

In my limited experience I find it best to have trailing margin-bottoms set to zero and try to always set the margin-top as and when required. Reason being the page is rendered from the top down.

When developing try using outline because it does not affect div or p sizes:

p, div { outline: dotted 2px red}

Thanks, this feedback is what I’m looking for.

That was my thinking, BTW I have a class called .outline and when in doubt add it to the elements class attr.

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.