CSS: Margin-top when parent's got no border

You could add overflow:auto to .body to prevent margin-collapsing. See http://www.w3.org/TR/CSS2/box.html#collapsing-margins


What you experience is margin collapsing. The margin doesn't specify an area around an element, but rather the minimum distance between elements.

As the green container doesn't have any border or padding, there is nothing to contain the margin of the orange element. The margin is used between the top element and the orange element just as if the green container would have the margin.

Use a padding in the green container instead of a margin on the orange element.