This is a response to CSS-Tricks' What you should know about collapsing margins.

Collapsing child margins

Six div elements. Each has margin: 1em 0. Margins are collapsed.

Collapsed

We want no collapsing and also want to keep the exact sizes so using padding or border is a no go.


Fighting against collapsing #1

Use inline-block in 100% width. Leave the root element alone to avoid double margins.

Not Collapsed

Inline blocks are probably the most solid way to do this (least disadvantages).


Fighting against collapsing #2

Use floats in 100% width. Can't as easily avoid double margins. (There is extra space after this paragraph.)

Not Collapsed

Floats require much more CSS if you want to achieve the same result as with inline blocks:

Not Collapsed

But it's only clearfix that is needed, which you probably already have in your project.


Fighting against collapsing #3

Use overflow: hidden. Disadvantage is that you can't position stuff outside their parent. Dirty, but easy single line solution.

Not Collapsed