Vertical Margin of Margin and vertical Margin of Margin

Vertical Margin of Margin and vertical Margin of Margin

During the exercise, I encountered a margin problem. The code structure is as follows: Set margin: 50px auto for the sub-element div in the parent element body; originally, I wanted to make the sub-element div 50 pixels away from the parent element, but the result was that the sub-element div is as high as the parent element body, and the distance from the

<! Doctype html> 
Figure ():

 
I checked some information and found out the problem of the margin merging of the margin,
In short, the outer margin merge means that when two vertical outer margins meet, they form an outer margin. The height of the merged margin is equal to the larger of the two merged margins. You can view the CSS margin merge to learn about this basic knowledge.
In practice, the vertical margin merge problem is common in the margin-top of the first child element. The spacing between the parent element and the parent element is exceeded, in addition, it only produces problems in standard browsers (FirfFox, Chrome, Opera, and Sarfi), while IE performs well.
The cause of this problem is:According to the specification, if a box is not filled with padding-top or border-top ), the top margin of the box overlaps with the top margin of the first child element in the internal document stream..
In other words, if the margin-top of the first child element of the parent element does not reach a valid border or padding. it will constantly find the trouble of "Leader" (parent element, ancestor element. As long as a valid border or padding is set for the leader, the unleader margin can be effectively controlled to prevent it from going beyond the hierarchy, fake the sacred intent, and execute its own margin as the leader's margin.
Solution to this problem: Add a border-top or padding-top to the parent element to solve this problem. In this example, you can change the body element of the parent element to the following style:
 
Body {margin: 0; padding-top: 1px;/* or border-top: 1px solid transform; */width: 100%; height: 100%; background: # 47c9af ;}
 
The modified result is as follows (B): The child element div and the parent element body are actually opened.

The first time I wrote a blog, continue to cheer! (If you find any problem with the blog post, please correct it)
For the vertical margin of margin, refer to link http://wenku.baidu.com/link? Url = Response