CSS DIV Three structure horizontal vertical containing margin calculation

  <style> * {margin:0;            padding:0;            Color: #fff;        font-size:12px;        } body {Background:grey;            } body>div {width:550px;            height:120px;            Background:blue;        margin-top:5px;            }. parent1:after {clear:both;            width:0;            height:0;            Content: ";            Display:block;        Visibility:hidden;        }. Parent {position:relative;            }. parent>div {width:100px;            height:30px;        Background:orange;        }. parent1>div {float:left;            }. parent1 span {width:40px;            height:60px;            background:red;            Position:absolute;            left:120px;        top:50px;        }. Parent1 child {margin:10px 20px; }. Parent2.Child {margin:10px 20px;            }. parent2 span {width:100px;            height:10px;            background:red;            Position:absolute;            left:120px;            top:30px;        Text-align:right;        }. Parent3. child1 {margin-bottom:10px;        }. Parent3. child2 {margin-top:20px;            }. parent3 span {width:100px;            height:20px;            background:red;            Position:absolute;            left:100px;            top:30px;        Text-align:right;        }. parent4 {padding:10px;        }. parent4 child {margin:10px;            }. parent4 span {width:20px;            height:60px;            background:red;            Position:absolute;            left:0;        top:50px; } </style>
　　
Conclusion:
1: Horizontal structure The right margin of the first box is equal to the margin-right of the left box + the margin-left of the right box; "Add"
2: Vertical Structure The bottom margin of the first box is equal to the margin-bottom of the upper box and the margin-top of the bottom box, "Take maximum"
3: Margin-left that contains the structure child is equal to the parent element's PADDING-RIHGT + margin-left of the child element "margin+padding add"
CSS DIV Three structure horizontal vertical containing margin calculation