When I add a margin to a nested DIV, it causes the parent DIV to receive the margin instead, unless I give the parent DIV a border. Why?

Question

Has anyone else ever ran across this? This is the second time it's come up in as many years and I am not sure the "correct" way to solve it.

I can achieve the same results with padding in the child, but it just makes no sense.

Testing in Safari/FF.

Answer 1

I usually solve this problem by setting display: inline-block on outer div. It'll make outer div to occupy exactly the space necessary to display its content.

An example, showing the difference.