margin-right值的計算疑惑？

在css規範中看到

10.3.3 Block-level, non-replaced elements in normal flow

The following constraints must hold among the used values of the other properties:

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

https://www.w3.org/TR/2011/REC-CSS2-20110607/visudet.html#blockwidth

但是我有以下的程序

https://jsfiddle.net/fage/jpc1LtgL/

最終輸出的值為0，按照我的理解因為div1的width是100px,其他六個屬性的初始值都是0，也就是此時margin-right應該為計算為正確的值已滿足上面的等式。我想他輸出的結果應該是200-100=100

---

這似乎是一個 bug，然而很多年前 WebKit 中把正確的結果改殘廢了（getComputedStyle returns wrong value for margin-right），
理論上 getComputedStyle().marginRight 應該獲取到布局完成後右側的 margin 值。

傲嬌的 Servo 表示我可以正確計算：

如果我們把 .div1 設置指定的 margin left/right 看看會發生什麼？

.div1 {
margin-left: 20px;
margin-right: 10px;
}


Chrome：

Servo:

規範中說道:

"margin-left" + "border-left-width" + "padding-left" + "width" + "padding-right" + "border-right-width" + "margin-right" = 包含塊的寬度

如果上述所有的屬性指定了非"auto"的值，這些值被稱為是「過度約束」，其中之一的計算值將不得不和它的指定值不同。如果"direction"屬性為"ltr"，"margin-right"的指定值被忽略，並重新計算以滿足上面的等式。如果"direction"為"rtl"，對"margin-left"採取上述的方法。

上面我們明確的設定了 margin-left/right 值，此時發生「過度約束」的行為，所以必須重新通過上述等式重新計算。

那麼如果父元素設置 direction: rtl，margin-left的指定值被忽略，此時我們可以預料正確的計算結果應該是margin-left 重新計算

margin-left = 200(包含塊) - 10(margin-right) - 100(width) = 90

Servo 依然堅挺！

Chrome:

我大 Servo 才是世界上最先進的瀏覽器！

---

瀉藥

沒什麼可說的

margin你又沒設置

Initial 值是 0

計算值當然也是 0

---

這個問題，抽象的理解就是，在一個大盒子里放入了一個小盒子，小盒子只佔100px的寬度，剩下的100px的寬度可以認為是空氣！！

如果要從你給的那個公式來說的話:

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

這個公式其實是用來判斷margin-left、margin-right和width設置為auto時的情況的. 只有在margin-left/margin-right的值為auto的情況下，才存在填充剩餘空間的說法，否則margin-left/margin-right的默認值都是0.

假設一個寬100px的p被包含在一個寬500px的div內，此時設置 p 的
margin-left值為auto,如下:

#demo{
width: 500px;
}
#demo p{
width: 100px;
margin-left: auto;
}
&
&p元素& &

結果就是, p相對於包含塊右對齊了,因為margin-left:auto;自動佔據了包含塊的可用空間，即500 -
100px = 400px。也就是說auto最後的計算值為400px，即margin-left:400px;。所以margin-right:auto;的結果會相當於左對齊。因此,margin:
0 auto;會在左右方向均分剩餘的空間,使得塊級元素得以在包含塊內居中顯示.

---

推薦閱讀：