Why does margin-top not act on the parent element and the margin-top element?

Why does margin-top not act on the parent element and the margin-top element?

Why does margin-top not act on the parent element:
The basic usage of the margin-top attribute is simple, but it is to set the top margin of an object. See the following code example:

<! DOCTYPE html> 
The above Code sets the top margin of the div to 50px. Everything runs well and there is no problem. Let's take a look at the next code:
<! DOCTYPE html> 
The original intention of the above Code is to make the top of the child element 50 PX away from the parent element, but in fact it does not achieve the expected effect, but it is close to the parent element at the top of the child element, in addition, margin-top seems to have been transferred to the parent element, so that the parent element produces the top margin. This is actually a typical problem of outer margin merging, but not all browsers will produce this situation. Generally, this phenomenon occurs in standard browsers, IE6 and IE7 do not merge the margins in this status. Conditions for the combination of top and outer margins:
1. There is no border between the top margin of the parent element and the top margin of the child element.
2. There is no non-empty content between the top margin of the parent element and the top margin of the child element.
3. There is no padding between the top margin of the parent element and the top margin of the child element.
3. The positioning attributes (except static and relative), overflow (except visible), and display: inline-block are not set in the parent element and child element.
4. The parent element or resource is not floating.
Note: The preceding conditions must be met. The solution to this problem is also very simple, as long as the above situation is damaged.
Original address: http://www.51texiao.cn/div_cssjiaocheng/2015/0501/506.html