Firefox：100％和内部填充？

Question

我有一个宽度为100％的div和里面的段落。该div有填充1.1em。在Chrome上，evrything按预期工作 - div跨越父级空间的100％，并且由于填充，段落会受到一点挤压。

但是在Firefox的div上花费100％+填充。如何在Firefox上强制内部填充？

Answer 1

如何在Firefox上强制内部填充？

的要素使用box-sizing: border-box;，作为默认，paddingborder和margin被计数的元件的外部。

使用box-sizing: border-box;将改变框模型，这将使​​padding和border在元素内而不是外部计数。

Demo没有box-sizing

Demo随着box-sizing

看到区别？您将不会在第二个演示中获得水平滚动条，其中border-box值为box-sizing属性。