The "margin" attribute of CSS typesetting DIV common layout techniques vertical center alignment, upper left corner, lower left corner, lower right corner, and upper right corner alignment

The value types of margin are: auto | length | percentage percentage: the percentage is the containing block margin
 
to which the box is applied. The default value of margin is 0, and margin supports negative values. margin can be used to specify the four sides of the box at the same time. If the attribute margin has four values, then the values ​​will be applied to the four sides in the order top-right-bottom-left , around the element in clockwise order. The expression is as follows:


 

margin：top right bottom left；

The four values ​​are separated by spaces. The effect is equivalent to:

 margin-top:value;
margin-right:value;
margin-bottom:value;
margin-left:value;

The basic principles for writing omitted values ​​are as follows:
 
References:
1. If there is no left value, use right instead;
2. If there is no bottom value, use top instead;
3. If there is no right value, use top instead.
 
According to these basic principles, we can have three ways of omitting, but the value of omitting margin will be greater than or equal to one no matter what, and the default value of margin is from top to end of left, so for the specific situation of omission, we can infer from left go back.
 
1. If the margin has only three values , the order of the values ​​is margin: top right bottom; left is missing, according to the principle, the value of left is replaced by right.
 
margin:10px 20px 30px; is equal to margin:10px 20px 30px 20px;
 
2. If the margin has only two values , the order of the values ​​is margin: top right; the bottom and left are missing, and the value of left is replaced by right according to the principle. The value of bottm is replaced by top.
 
margin:10px 20px; is equal to margin:10px 20px 10px 20px;
 
3. If there is only one value for margin, the order of the values ​​is margin:top; without bottom, left and right, all other values ​​are replaced by top.
 
margin:10px; is equal to margin:10px 10px 10px 10px;
 

---

Practical exercise:
 

<div class="A">

        <div class="B"></div>

</div>

The relative typesetting position of B in the layout of A:

.A{ display:flex; }   /* 重要：display必须是flex弹性布局才有效 */

Left and right center alignment : .B{ margin:0 auto; }

Vertical center alignment : .B{ margin:auto; } or .B{ margin:auto auto; } 

左上角对齐： .B{ margin:0 auto auto 0; } 

左下角对齐： .B{ margin:auto auto 0 0; } 

右上角对齐： .B{ margin:0 0 auto auto; } 

右下角对齐： .B{ margin:auto 0 0 auto; } 


靠左对齐垂直居中： .B{ margin:auto auto auto 0; }

靠右对齐垂直居中： .B{ margin:auto 0 auto auto; }