爲什麼填充添加到元素的可見寬度，即使將框的大小設置爲邊框？

Question

所以我使用Semantic-ui進行編碼，並且在flexbox容器中有兩個彼此相鄰的切換框（複選框）。當窗口大小減小時，它們環繞，以便一個在另一個之上。

爲了讓它們分散一點，我添加了大約5px的右側和底部填充。但是我注意到一個奇怪的行爲。填充會導致盒子水平移動，但當垂直堆疊時，它們之間沒有空間，即使每個盒子上都有底部填充。

進一步調查顯示覆選框的box-sizing屬性設置爲border-box。讀完後，我發現border-box盒子模型計算寬度和高度以包含填充和邊框。

複選框的高度爲1.5rem。

我的問題如下。據我瞭解，使用邊框時，填充不應改變元素的大小。但是，只有在鏈接的jsfiddle中設置了明確的尺寸時，纔會出現這種情況。高度已設置，所以底部填充不作爲額外添加。但寬度不是，正確的填充對div的可見寬度有影響。

爲什麼會出現這種情況？當然，填充不應該影響元素的大小（除非設置成可笑的東西，大於元素本身），而不管我是定義了一個確定的寬度還是將其計算在內？

的jsfiddle：http://jsfiddle.net/Astridax/8cd48emn/

請嘗試使用切換開發工具，看看我的意思是墊襯。

Answer 1

據我所知，填充不應該在使用邊框時改變元素的大小。

這是你困惑的地方。下面是規範必須在這個問題上說：http://www.w3.org/TR/css3-ui/#box-sizing0

邊界框

此元素上指定的寬度和高度（和相應的最小/最大 屬性）確定的邊界框元件。 也就是說，元素上指定的任何填充或邊框都被排列在 之內，並在此指定的寬度和高度內繪製。內容寬度 和高度是通過從指定的「寬度」和「高度」屬性中減去相應邊的邊框和填充寬度 來計算的。作爲內容的寬度和高度不可能是負 （[CSS21]，第10.2節），該計算是在0

設置box-sizing到border-box是指定寬度將被所述的實際效果地板包括邊框和填充。該規範沒有說明任何關於未指定的寬度，因此它們被視爲正常 - 寬度與它們需要包含內容和填充以及邊框一樣寬。

編輯：

什麼你暗示應該發生實際上是不可能做到的，原因如下。想象一下，你有一個div的內容，使得內容的auto寬度準確地爲500px。然後在其周圍扔20px的填充。

#myDiv { 
    padding: 20px; 
    width: auto; 
} 

沒問題，但 - 你有一個540px寬div與盒大小默認爲content-box。

好的，讓我們將box-sizing更改爲border-box。

#myDiv { 
    box-sizing: border-box; 
    padding: 20px; 
    width: auto; 
} 

你應該發生的事情是現在應該忽略填充。所以我們有一個div，其內容爲500px，我們現在將包含500px內的填充，而不是擴展div的寬度。但等 - 現在內容框已縮小到460px，以允許填充和框的整體大小爲500px。但是請等待，在計算寬度時我們不應該考慮填充，所以我們最好將div放在460px的位置？

你看到問題了嗎？你可以像這樣無限地繼續下去。