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