“宽度”是否会覆盖“填充”？

Question

假设包装盒的宽度为5厘米，填充（所有边）为2厘米。

如果我将内容的宽度设置为50％。现在宽度的绝对值将是2.5厘米。但是如果填充效果仍然存在，则现在该框将是2 + 2.5 + 2 = 6.5cm。但内容现在不再是宽度的50％（2.5 / 6.5！= 50％）。

我有点困惑，有什么帮助吗？谢谢！

Answer 1

查看Box Model以了解目前的效果。

某些浏览器（特别是较旧的浏览器）之间的差异很大。 没有像以前那么大的问题，但使用box-sizing的解决方案可能不是一个通用的修复程序，具体取决于您的用户（仍然在IE上的任何保留> 8？）。

正如其他人所说，你可以使用box-sizing property来适应单独的内容，填充内容，或整个框w / padding＆amp;边界（这可能是你想要的）。

Answer 2

结果是正确的。为简化这些计算，您可以使用box-sizing: border-box在总宽度中包含填充。

  

边界框

     

width和height属性包括填充和边框，但不包括边距。这是Internet Explorer使用的盒子模型   当文档处于Quirks模式时。注意：填充＆am​​p;边界将是   在盒子里面，例如IF .box {width：350px};然后你申请{border：   10px纯黑色;} RESULT {在浏览器中呈现} .box {width：   350像素;}

参考：MDN - box-sizing

Answer 3

这是开发人员遇到的常见问题。

如果我有：

<div style="width: 200px"></div>

然后宽度将是200px宽。 如果我添加10px填充，那么我需要从宽度中扣除20px的总和。 所以要保持200px宽，现在必须是：

<div style="width: 180px; padding: 10px"></div>

可以覆盖它，因此不需要根据填充调整宽度，但我觉得你应该坚持CSS的预期工作方式。

Answer 4

  

如果不覆盖填充，则会将填充添加到宽度。   将填充视为额外宽度，但在元素之外。

     

宽度不会覆盖填充，但填充仍然是   那么其他元素将被推离其位置（如果   相对）。

编辑：带边距的混淆填充。