CSS填充占用空间

Question

如果我没弄错，填充值占用实际边框内的空间，边距值占用实际边框以外的空间，对吗？

所以，如果我正确的话，这个CSS设置：

.something { width: 400px; padding: 10px; border: 0; }

将保持400px宽度。

所以，如果我有这样的设置：

*             { margin: 0; padding 0; border: 0px; }
.main-wrapper { width: 960px; }
.main-section { width: 720px; padding: 10px; float: left; }
.sidebar      { width: 240px; padding: 10px; float: left; }
.footer       { clear: both; }

据我所知，.main-section的实际宽度为700px，左右为20px填充。并且，.sidebar的实际宽度为220px，左右填充20px。因此，总宽度将与main-wrapper宽度完全相同。像这样：

(10px + 700px + 10px) + (10px + 220px + 10px) = 960px //.main-wrapper width

我无法理解的是，为什么.sidebar无法坐在.main-wrapper的右侧？它就像填充值一样占据了边界之外的空间。因此.main-wrapper无法满足其内容，然后.sidebar正在逃避...

为什么会这样？

Answer 1

box-sizing的初始值为content-box。这意味着

  

仅测量width和height属性   内容，但不是填充，边框或边距。

相反，您可以尝试box-sizing: border-box：

  

width和height属性包括填充和边框，但是   不是保证金。

还有box-sizing: padding-box，但并非所有浏览器都支持

  

width和height属性包含填充大小，而不是   包括边界或边缘。

Answer 2

将填充添加到元素的最终大小。

(10px + 720px + 10px) + (10px + 240px + 10px) = 1000px