使用css边框，边距，填充和宽度我遇到了一个额外的像素......
我知道元素的总宽度和高度是宽度，边框，边距和填充的总和。
如果你看一下http://jsfiddle.net/Fs8HQ/，一切似乎都有效。单击按钮时，将一些像素从边框移动到边距会创建一个伪动画。
现在让我们在http://jsfiddle.net/Fs8HQ/1/中设置固定的宽度和高度（从中删除宽度和高度：活动）：在Firefox和Chrome中，有一个超高和一个超宽像素可以移动所有相邻元素。在Opera中有一个超宽和两个超高像素。他们来自哪里？
但是这里http://jsfiddle.net/hJTpY/将像素从边框移动到填充似乎可以解决所有问题，但伪动画不一样。
在前两个小提琴中，边界逐渐减少，接近内容;在最后一个边框中，边框会被扩展的内容缩小。
为什么会这样？我错过了什么？
答案 0 :(得分：2)
这是我最近注意到的一个问题：
如果声明了正确的doctype，则W3C引入的默认boxmodel为content-box（与在IE中使用quirks-mode触发的Microsoft boxmodel相矛盾。）
但是，最近我注意到浏览器有UA样式声明box-sizing:border-box（仅用于输入元素？）。这就是为什么你的技巧不起作用，因为边框被计入宽度。要解决此问题，您必须声明box-sizing:content-box。请参阅处理同一问题的this question。
答案 1 :(得分：0)
出现问题是因为当你修改宽度时，例如100px时，带边框的框的宽度为100px（由于box-sizing属性），所以边距的增加不能通过缩小来补偿当你没有设置它的宽度时发生的框。
如果宽度固定，并且框大小设置为边框，则不应修改边距属性以避免其他框移动。
简单的解决方法当然是在内容框中设置框大小：http://jsfiddle.net/Fs8HQ/7/
有关css box-sizing属性的更多信息，请转到there。