好程序员web前端ji分享CSS不同元素margin的计算：行内级元素

　　Inline，非置换元素:如果margin值为auto，则margin-left和margin-right的计算值也就为0

　　Inline,置换元素:同上

　　Inline-block,置换元素在文档流中:同上

　　Inline-block,非置换元素在文档流中:同上

'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' = width of containing block

　　下面的情况下，如果margin值为auto

　　如果width是auto值，那么其他值是auto的值就为0

　　如果margin-left和margin-right的值为auto，使用的值相等，那么就相对于包含块水平居中。

　　块级置换元素，在文档流中

　　同块级非置换元素一样。

　　总结

　　行内级置换元素和非置换元素，在margin值为auto时，margin-left和margin-auto的计算值都为0。

　　块级置换元素和非置换元素:

'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' = width of containing block

　　如果width是auto值，那么其他值是auto的值就为0

　　如果margin-left和margin-right的值为auto，使用的值相等，那么就相对于包含块水平居中。

The percentage is calculated with respect to the width of the generated box’s containing block. Note that this is true for margin-top and margin-bottom as well