CSS 填充在外面占用空间答案

【问题标题】：CSS padding is take space outsideCSS 填充在外面占用空间
【发布时间】：2015-03-05 00:53:45
【问题描述】：

如果我没记错的话，填充值在实际边框内占用空间，边距值在实际边框外占用空间，对吧？

所以，如果我是正确的，这个 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 正在逃跑......

为什么会这样？

【问题讨论】：

右键单击 > 检查元素。查看右侧面板的底部。它会告诉你你对第一行的回答。另外，请尽量避免浮动元素。改用定位
看看：CSS does the width include the padding?

标签： css

【解决方案1】：

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

width 和 height 属性仅包括内容，但不包括内边距、边框或边距。

你可以试试box-sizing: border-box:

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

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

width 和 height 属性包括填充大小，但不包括包括边框或边距。

【讨论】：

或padding-box，如果不应包含边框。

【解决方案2】：

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

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

【讨论】：