關於CSS邊框，邊緣，填充和寬度

Question

與CSS邊框，邊緣，填充和我碰到一個額外的像素寬度來打......

我知道一個元素的總寬度和高度的總和其寬度，邊界，邊距和填充。

如果你看看這http://jsfiddle.net/Fs8HQ/，一切似乎工作。當你點擊按鈕時，將一些像素從邊框移到邊距上會創建一個僞動畫。

現在讓我們在http://jsfiddle.net/Fs8HQ/1/中設置固定寬度和高度（將寬度和高度從：active刪除）：在Firefox和Chrome中，有一個超高像素和一個超寬像素可移動所有相鄰元素。在Opera中有一個超寬和兩個超高像素。他們來自哪裏？

但是這裏http://jsfiddle.net/hJTpY/將像素從邊界移動到填充似乎修復了一切，但僞動畫並不相同。

在前兩個小提琴中，邊界減少到接近內容;在最後一個邊界由擴大的內容減少。

爲什麼會發生這種情況？我錯過了什麼？

Answer 1

這是一個問題，我最近注意到：

由W3C推出的默認boxmodel是content-box如果正確的doctype聲明（有悖於微軟boxmodel這可以通過使用IE的怪癖模式觸發） 。

但是，最近我注意到瀏覽器具有聲明box-sizing:border-box（僅用於輸入元素？）的UA樣式。這就是爲什麼你的伎倆不起作用，因爲邊框被計入寬度。要解決這個問題，你必須聲明box-sizing:content-box。請參閱this question處理相同的問題。

Answer 2

問題發生的原因是，當您固定寬度時，例如在100px時，邊框的寬度將爲100px（由於框大小屬性），因此您的邊距增加不會由收縮盒子，當你沒有設置寬度時會發生這種情況。

使用固定寬度和框大小設置爲邊框，您不應該修改邊距屬性以避免其他框移動。

的簡單的解決方法當然是設置背箱上漿在內容框：http://jsfiddle.net/Fs8HQ/7/

有關CSS框大小調整屬性的更多信息，請there。