The vertical margin problem of margin

Yesterday, when the practice encountered the margin problem, to the body of the sub-element div set margin-top:50px, why the DIV element does not open the body (that is, the top of the div from the body 50px)??? Instead, the Div, together with the body, was pulled down, body distance

The code structure is as follows:

html{width:100%;height:100%;background:red;} Body{margin:0;padding:0;width:100%;height:100%;background: #47c9af;} div{width:800px;height:200px;margin:50px Auto;background:yellow;}

Such as:

Online access to some information, know that this is the margin vertical margin merger problem.

When two vertical margins meet, they form an outer margin. The height of the merged margin is equal to the greater of the two of the height in which the merged margins occur. You can look at the CSS margin merge to learn this basic knowledge.
In practical work, the vertical margin merging problem is common in the margin-top of the first child element to open the spacing between the parent element and the adjacent element of the parent element, and only under the standard browser (Firffox, Chrome, Opera, Sarfi) problems, IE is performing well.

If according to the CSS specification, ie "good performance" is actually a wrong performance, because IE's haslayout rendering led to this "good performance" appearance. Other standard browsers exhibit a "problematic" appearance. The reason for this problem is that , according to the specification, if a box does not have a filler (padding-top) and a top border (border-top), the top margin of the box overlaps with the top margin of the first child in its internal document flow .
Besides, the white point is: The top margin of the first child element of the parent element margin-top if a valid border or padding is not touched. The trouble of "leading" (parent element, ancestor Element) can be found in a layer. As long as the leadership to set an effective border or padding can effectively control the goal of the non-leader of the margin to prevent it leapfrog, false preach Imperial decree, their own margin when the leader of the margin execution.
The solution for vertical margin merging has been explained above, adding a border-top or padding-top to the BODY element in the parent element example to solve the problem.

Change the body style in the example above to

body{    margin:0;    padding-top:1px;/* or border-top:1px solid transparent;*/      width:100%;    height:100%;    Background: #47c9af;}

The result of the operation is as follows:

Http://wenku.baidu.com/link?url=  Knqaeypgj1butkfqwmj1jgj8tti0bktlvpal49tbhd0ccjrdhgcruvykjprooccmj6mznqm6qbo15kin1s9ahgb_pv9cfukyhethr7quxzy Reference links

The first time to write a blog, continue to refuel!

Vertical margin problem for margin