好程式設計師web前端分享CSS不同元素margin的計算

好程式設計師 web 前端分享 CSS 不同元素 margin 的計算 ： 行內級元素

 

　　Inline ，非置換元素 : 如果 margin 值為 auto ，則 margin-left 和 margin-right 的計算值也就為

 

　　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 的值就為

 

　　如果 margin-left 和 margin-right 的值為 auto ，使用的值相等，那麼就相對於包含塊水平居中。

 

　　塊級置換元素，在文件流中

 

　　同塊級非置換元素一樣。

 

　　總結

 

　　行內級置換元素和非置換元素，在 margin 值為 auto 時， margin-left 和 margin-auto 的計算值都為 。

 

 

　　塊級置換元素和非置換元素 :

 

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

 

　　如果 width 是 auto 值，那麼其他值是 auto 的值就為

 

 

　　如果 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.