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

Question

我得出了下面的样子。

注意到文本位于绿色标记上方，我决定向三个粉红色容器添加一些内部 填充。当我按照我的决定去做时，结果变成了这样，令我感到非常惊讶和失望。

为什么外部尺寸会受到内部内边距的影响？!我在运送东西时填充了盒子。它们不会因为我把那些白色的东西放进去保护里面的东西而变大!我只是得到更少的空间......

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

Answer 1

这是 W3C 盒子模型:

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

Microsoft 的更直观:

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

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

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

另见 box-sizing在 MDN 中，和 Internet Explorer box model bug在维基百科中。