查漏补缺——当父元素宽度设置100%,再设置padding,为什么会出现滚动条?


问题

如题所示

width: 100%;
height: 80px;
padding: 0 80px;

答案

父元素width为100%,设置padding,出现滚动条

我们看看没有设置padding之前,视图是个啥情况?

我们可以看到整个整个盒子content的宽度为299,而此时的padding是0。

当我们加上padding之后:




我们从视图中可以看出除了content区域的299,还加上左右padding的80.