填充/边距宽度设置？

Question

基本上我有一个100％宽度的div。但是，我也希望它有一些填充。但是当我添加填充时，宽度会被添加到它，这意味着我的div现在离开屏幕并且有一个水平滚动条。

通常我通过使div的百分比较低来补偿（例如95％或90％）。

我想知道是否有更优雅的方法来处理这种情况？

Answer 1

查看box-sizing。

.example {
   -moz-box-sizing:    border-box;
   -webkit-box-sizing: border-box;
    box-sizing:        border-box;
}

默认情况下，元素的宽度是根据其内容框计算的。因此，应用填充添加到宽度。如果将框模型更改为border-box，则填充将包含在宽度中。有关兼容性，请查看caniuse.com

Answer 2

尝试将填充设置为5％，将宽度设置为90％（100-5x2）

Answer 3

CSS Box模型涉及四个主要内容。 i）保证金 ii）边界 iii）填充 iv）内容

当我们设置宽度时，我们基本上设置CONTENT的宽度，因此添加填充意味着宽度的整体增加。

请浏览以下资源，您将了解所有内容。

http://www.w3.org/TR/CSS2/box.html

http://css-tricks.com/the-css-box-model/

你可以使用％来处理这种情况，或者如果你还设置了边框甚至想设置边距，你也可以正确计算px宽度。

element{
    width: 96%;
    padding: 0 2%;
}

Answer 4

默认情况下，div为width: auto（假设正常定位，显示和缺少浮动）将导致它填充其容器（计算边距，填充和边框）。

只需将其保留在width: auto，而不是设置明确或百分比宽度。