关于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。