关于css边框、边距、内边距和宽度答案

【问题标题】：About css border, margin, padding and width关于css边框、边距、内边距和宽度
【发布时间】：2012-09-27 08:54:23
【问题描述】：

使用 css 边框、边距、填充和宽度我遇到了一个额外的像素...

我知道一个元素的总宽度和高度是它的宽度、边框、边距和内边距的总和。

如果您查看此 http://jsfiddle.net/Fs8HQ/ ，似乎一切正常。当您单击按钮时，将一些像素从边框移动到边距会创建一个伪动画。

现在让我们在http://jsfiddle.net/Fs8HQ/1/ 中设置一个固定的宽度和高度（从 :active 中删除宽度和高度）：在 Firefox 和 Chrome 中，有一个额外的高度和一个额外的宽度像素可以移动所有相邻的元素。在 Opera 中有一个额外的宽度和两个额外的高度像素。他们来自哪里？

但这里http://jsfiddle.net/hJTpY/将像素从边框移动到填充似乎可以解决所有问题，但伪动画不一样。

在前两个小提琴中，边框被缩小到接近内容；在最后一个中，扩展的内容缩小了边框。

为什么会这样？我错过了什么？

【问题讨论】：

在第二段之后就失去了你......别废话了，直说问题
@Jawad jsfiddle.net/Fs8HQ/2 这不是盒子大小。 I-love-php 打开小提琴看看会发生什么。
@Deneb 我真的不明白...
@GionaF jsfiddle.net/Fs8HQ 点击元素；看到边框和边距的变化不会造成问题。将输入的宽度设置为 100px；现在点击。为什么会这样？
@Deneb：所以它毕竟是盒子大小。

标签： css width border margin padding

【解决方案1】：

这是我最近注意到的一个问题：

如果声明了正确的 doctype，W3C 引入的默认 boxmodel 是 content-box（与 Microsoft 的 boxmodel 相矛盾，可以通过在 IE 中使用 quirks-mode 来触发）。

但是，最近我注意到浏览器具有声明 box-sizing:border-box 的 UA 样式（仅适用于输入元素？）。这就是为什么您的技巧不起作用的原因，因为边框已计入宽度。要解决此问题，您必须声明 box-sizing:content-box。请参阅 this question 处理相同的问题。

【讨论】：

所以它毕竟是盒子尺寸？

【解决方案2】：

出现问题是因为当您固定宽度时，例如在 100 像素处，带有边框的框的宽度将为 100 像素（由于 box-sizing 属性），因此您增加的边距不会通过收缩来补偿框，当你不设置它的宽度时会发生这种情况。

宽度固定，box-sizing设置为border-box，不应该修改margin属性，以免其他box移动。

简单的解决方法当然是在 content-box 处设置 box-sizing ：http://jsfiddle.net/Fs8HQ/7/

有关 css box-sizing 属性的更多信息，请转至there。

【讨论】：