CSS padding 是在外面占用空间

Question

如果我没记错的话，padding 值占用实际边框内的空间，而 margin 值占用实际边框外的空间，对吗？

所以，如果我是正确的，这个 CSS 设置:

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

将保持 400 像素宽度。

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

*             { 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的初始值是内容框。这意味着

The width and height properties are measured including only the content, but not the padding, border or margin.

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

The width and height properties include the padding and border, but not the margin.

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

The width and height properties include the padding size, and do not include the border or margin.