HTML box model with margins
css, html
Solution
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.
Problem
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?