为什么填充会影响外部尺寸？

Question

我到达了下面的样子。

注意到文本位于绿色标记上方，我决定在三个粉红色容器中添加一些内部填充。当我做出决定时，就像这样，出现了我最大的惊讶和失望。

为什么外部尺寸受内部填充影响？！运送东西时，我已经填好了盒子。他们不会变大，因为我把那些白色的东西放在里面来保护内容！我只是在里面得到更少的空间......

是否与我 DIV 之间之间的奇怪间距有关？我无法摆脱这些......

Answer 1

这就是W3C的盒子型号：

totalWidth = marginLeft + borderLeft + paddingLeft
             + width
             + paddingRight + borderRight + marginRight
contentWidth = width

微软更直观：

totalWidth = marginLeft + width + marginRight
contentWidth = width - (borderLeft + paddingLeft + paddingRight + borderRight)

要使用IE模型，您可以使用CSS3 box-sizing：

*, :before, :after { box-sizing: border-box; }

另请参阅MDN中的box-sizing和维基百科中的Internet Explorer box model bug。

Answer 2

Box-sizing是一个CSS3属性，可用于获取填充以影响元素内部。

由于某些原因，使填充物影响外部可能很有用，但内部的填充应该是标准的。