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.

Answer 2

It is called margin-collapse. When a top and bottom margin are directly touching (not separated by anything, like a border or line break) the margins collapse into a single margin. This is not a bug. Read more about it here at SitePoint.

Answer 3

Sounds like margin collapsing which is natural behaviour. This is a good read:

http://www.andybudd.com/archives/2003/11/no_margin_for_error/

There are number of ways to get round margin collapsing issues. One way is to add a border or 1px of padding around the elements so that the borders are no longer touching and so no longer collapse.

Another way to stop margins collapsing is to change the position property of the element.The CSS2 Specs explain that margins of absolutely and relatively positioned boxes don't collapse. Also if you float a box it's margins no longer collapse. It's not always appropriate to change the position properties of an element but in some situations if you're having problems with unwanted margin collapsing, this may be an option.