inline-block margins don’t overlap

[mattiafrigeri]

Hi all, I have this situation:

P + margin bottom of “p” + “figure” top margin + FIGURE

P is block level, while FIGURE is inline-block.
Margin between should be 30px, but I see it as 50px! (they don’t overlap!)

Is it correct!?

thanks!

[Paulie_D]

Probably not but you aren’t being very specific.

Is this an issue in a specific browser, a specific browser version?

Have you used a reset / normalize css?

Do you have a link we could look at?

https://css-tricks.com/how-to-ask-a-good-question-in-the-forums/

[mattiafrigeri]

Sorry Paulie you are totally right!
I am asking this question because if you know that this is a common behaviour, than discussion “closed”.

Now that you tell me that it is not expected, then I’ll prepare my question better.

For now I can only tell that I am using reset CSS by Meyer.

thanks

[Paulie_D]

Frankly it depends on what we can look at.

We don’t know what the margins you mentioned are actually set at other than **apparently** they should total 30px.

That’s why we need to see it happening in real time…hence a link to a live site would be the best option.

[wolfcry911]

It’s correct behavior – margins of inline-block elements _do not_ collapse.

[mattiafrigeri]

ah thanks then! Does W3C states it somewhere? Just to write it down once for all… ;)

[wolfcry911]

Indeed they do:

http://www.w3.org/TR/css3-box/#collapsing-margins

and/or

http://www.w3.org/TR/CSS2/box.html#collapsing-margins

[mattiafrigeri]

Thanks wolfcry ;)

[Author]

Posts