Firefox：100％和内部填充？

Question

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

然而，在Firefox上，div消费100％+填充。如何在firefox上强制内部填充？

Answer 1

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

使用box-sizing: border-box;作为元素，默认情况下，padding border和margin计算在元素之外。

使用box-sizing: border-box;会更改框模型，这会使padding和border计入元素内而不是外部。

Demo 没有box-sizing

Demo 使用box-sizing

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