css - 填充/包含边距的宽度设置？

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