Why does my margin-bottom add a margin-top?

Oh my god, really, I can’t help myself. After lots of time passed finding the cause of a huge top margin in my markup, I found such a strange thing… I got this article element, and I added a margin-bottom: 60px to that element. Now the problem is, a margin-top with the same number gets added automatically to that element as well.

It does not matter if I put margin: 0px 0px 60px 0px or margin: -60px 0px 60px 0px, it’s just not doing what I say. Firebug does not even show the yellow bar for the margin at the top (maybe that’s why a margin-top: 0 !important; won’t even work), it’s just moved down without any way to solve it but to remove the margin bottom.
I do not have any margin top declared for the article element somewhere else in my CSS .

I only got the file on XAMPP so I cannot show you anything, but maybe someone has encountered this before?

Thanks for any tipps!
Kind regards

Could the element above it share the same class?

Are you using the HTML5 javascript shiv by chance?

@glossycat

Probably your article element has float child elements. Try add “overflow: hidden;” for article. I think it must help

- Alex

Hi!

i think you are experiencing the “collapsing margins issue”.

more details can be found here :

Colapsing margins

If you cannot resolve it you can contact me from my profile page and I’ll help you

best regards, Stefan

I remember experiencing something similar once when I tried to test some CSS quickly. I’ve quickly written few HTML tags and applied bottom margin to the one of the first elements in a document end ended up with huge white space on the top. The issue was similar to yours. I don’t remember what it was exactly, but it’s possible that it was related to floating.

Hi everybody and thanks for all the fast tipps!

The element above the article neither is an article nor does it have a margin, that’s why kops and zauan’s solutions did not work but thanks anyways guys!
Hi Jami, I do use HTML shiv but I’m experiencing this in FireFox and I set the HTML shiv to only IE lower than 9.
And woops, the overflow:hidden solved the issue… Thanks a bunch Nekto! But what is happening there that causes this? :/ Something with the floating, but like how?

I love this forum Thanks to all of you again and all the best!!

glossycat said
But what is happening there that causes this? :/ Something with the floating, but like how?

As I remember IE just don’t wrap inside floating elements. If you inspect your article element in Firebug, you’ll see that in IE it has a height equal to margin-top value.

You’re welcome

- Alex