Box model - margin characteristics

margin has two characteristics in the course of the following:

1. Vertical collapse Margin

　　　　　　　　- to set the margin-top when the child element, if the parent element is also changed with the margin-top position 

 

　　Solution:

1. To the parent element to set the border
2. The parent element is provided to overflow: hidden;
3. Let the child element off the mark (floating | positioning)

 

2. Margin combined vertical

　　　　　　　　- If you set the upper and lower margin to the element, then the final margin to a maximum value, whichever

　　interpretation:

• If there are upper and lower boxes, a box is provided to the upper margin-bottom: 100px; box disposed below a margin-top: 50px; then the vertical spacing between the two boxes is 100px (ie: margin combined value in the vertical direction. ).
• If there are two right and left boxes, the box is provided to the left margin-right: 100px; box set to the right margin-left: 50px; then the distance between the two boxes to the left and right by 150px (ie: margin value is not in the horizontal direction. merge).