填充添加到 div 宽度/高度？ [复制]答案

【问题标题】：Padding adds to div width / height? [duplicate]填充添加到 div 宽度/高度？ [复制]
【发布时间】：2015-07-25 07:15:58
【问题描述】：

<html>
<head>
<style>
    * { margin:0; border:0; padding:0; }
    div { height:500px; }
    #container { width:1000px; background-color:#000; }
    #column-one { float:left; padding:10px; width:500px; background-color:#234; }
    #column-two { float:left; padding:10px; width:500px; background-color:#345; }
</style>
</head>
<body>
<div id="container">
    <div id="column-one">
    </div>
    <div id="column-two">
    </div>
</div>
</body>
</html>

确实违反直觉。

【问题讨论】：

err 有问题吗？以及什么浏览器（IE因此而臭名昭著，它有一个“破坏”的盒子模型）。
所有浏览器都为元素的宽度/高度添加内边距、边距和边框
这是一个众所周知的“功能”。你有什么问题？

标签： css

【解决方案1】：

content-box model 声明填充和边框不计入您为框设置的width。所以他们添加到它的width。

现代浏览器支持 CSS3 的 box-sizing: border-box 以使 width 表示内容、内边距和边框的总宽度（当然，默认是 content-box，触发上述行为）。

【讨论】：

我知道这很老了，而且是一个被打死的话题，但是为什么内容框模型不包括填充？如果我可以专门控制 div 的大小并且在其中仍然有填充，那么创建精确的布局会容易。此外，我似乎在 IE10 或 Chrome 中都没有任何运气使用“box-sizing”属性。对不起，如果我听起来很沮丧。这不是你的错。
@Mike U：那是因为根据定义，内容不能出现在填充区域中。 Firefox 有一个实验性的 padding-box 值，规范中提到了它，但存在风险，并且没有在其他任何地方实现。如果你不能让 box-sizing 在 IE10 或 Chrome 上工作，那么肯定还有别的原因，因为据我所知，它们都支持无前缀。
我了解盒模型的工作原理。主要是好奇为什么它会这样工作。这似乎非常不直观和不合逻辑。自从我之前的评论以来，我已经让 box-model 属性起作用。似乎你不能只将它应用到特定的类。我让它工作的唯一方法是将它应用于“*”。经典的方式似乎不合逻辑。如果我希望某些东西占屏幕的 40%，并且填充为 4px，那么使用经典模型进行正确布局是不可能的。只是抱怨，我猜。至少我现在知道如何绕过它了。
@MikeU 这就是 CSS3 与 CSS2 不同的原因；另外，众所周知，CSS 已损坏

【解决方案2】：

宽度是您的内容可以填充的宽度，而不是由边框分隔的框的宽度。

【讨论】：

【解决方案3】：

也许我误解了，但我认为您可以通过使用width: auto 代替width: 100% 来解决您的问题； PS：我知道帖子很旧，但也许仍然有用...

【讨论】：