CSS：不同元素margin的计算_html/css_WEB-ITnose

关于什么元素的分类可以看我这篇文章 CSS:关于元素高度与宽度的讨论 系列文章（二）

行内级元素

• 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，使用的值相等，那么就相对于包含块水平居中。

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

同块级非置换元素一样。

总结

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

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

   '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，使用的值相等，那么就相对于包含块水平居中。