Question

There’s something in the box model of HTML block elements that I can’t grasp.

Please have a look at the following jsFiddle:

http://jsfiddle.net/5b7X2/1/

There is an outer and an inner <div>, and both of them have the same margin on their left, top, right and bottom. The outer <div>‘s margin is transparent, so we see the white body around the coloured area. However, the inner <div>‘s margin is only visible on the left and on the right. In my opinion, there should be a red bar of 50px height above and below the orange area.

Why am I wrong?

Answer 1

Vertical margins collapse into each other (according to some fairly complex rules which you can find at the other end of that link), so the inner margin-top occupies the bottom half of the outer margin-top.