先上图
??由图可看到，块级元素的水平方向上又“7大属性”：margin-left、border-left、padding-left、margin-left、width、padding-right、border-right和margin-right。这些属性中，只有3个属性可以设置为auto，分别为：margin-left、width和margin-right。
在讨论之前，首先记住两条原则：
??1）这7大属性的值总和=父元素的width；
??2）属性间冲突时，优先级：width>margin-left>margin-right。
元素的属性width和margin的不同组合情况分如下4种情况：
| (1) | (2) | (3) | (4) | |
|---|---|---|---|---|
| width | 定值 | 定值 | auto | auto |
| margin | 定值 | auto | 定值 | auto |
（1）width= 定值，margin=定值
??此种情况即为width、margin-left、margin-right均为定值，为过分受限，根据原则2，此时总会把margin-right强制为auto。
??也就是说，为了达到原则1，margin-right会根据情况调整，使元素的总宽度等于其包含快的width。
（2）width= 定值，margin=auto
??* width= 定值，margin-left = mergin-right = auto，此时margin-left与margin-right会设置为相等的长度，因此元素会在父元素中居中
??* width= 定值，margin-left和mergin-right中一个为定值、一个为auto，则为auto的属性根据原则1，自动调整。
（3）width= auto，margin=定值
??* marin-left + margin-right < 父元素宽度，则width根据原则1设置为某个值
??* marin-left + margin-right >= 父元素宽度，则width为0
（4）width= auto，margin=auto
??* width、margin-left、mergin-right均为auto，这就是默认的情况，此时两个外边距会设置为0，width会尽可能宽以达到原则1。
??* width = auto，margin-left和mergin-right中一个为定值、一个为auto，此时，根据原则2，width为占用剩下的所有宽度，为auto的margin的值为0。
以上是针对块级元素，对于非块级元素（内联元素和替换元素）：
??* 只要设置为display:block，除了元素的宽度为内容的固有宽度这一点，其他表现与块级元素表现一致。
??* 如果不设置display:block， 则width为内容的固有宽度，水平方向margin可以设定为固定值，但设置为auto会表现为0；
原文：https://www.cnblogs.com/youhong/p/9392359.html