Strange margin issue with a display: inline-block child

Question

Heres the fiddle

When I set #two to inline-block it subtracts the 16 px of top/bottom margin from the

and adds it to the divs c

Answer 1

This has already been answered and accepted, still I'd like to point out that clearfixing it would have prevented margin collapse thus normalizing its behaviour

I'd add:

.two:before,
.two:after {
    content: " ";
    display: table; 
}

.two:after {
     clear: both;
}

See this fiddle . Here's the Nicholas Gallagher clearfix I've used.