元素width:100%;设置padding出现横向滚动条的问题-创新互联

当我们给块元素设置宽度为100%，然后再设置padding值想让里面的内容有一定的内边距时，会发现此时内边距的效果达到了，但是却出现了横向滚动条，

原因:padding 是边框和里面内容之间的间隙，如果你设置了padding，padding的值是不变的，当内容+padding大于容器时，它会以容器的左上角为中心，保持padding的距离向外扩展，因此出现了滚动条，正常解决办法是，将元素宽度减去padding值的2倍，但是现在元素宽度值并不是具体的px值，而是百分数，

这种情况下解决办法有两种：
1.最简单的办法是去掉元素宽度值设置，width:100%，块级元素默认就是100%宽度，设置padding后，padding会被计算为宽，实际效果的宽度会自适应的调整为100%。
2.利用css3新特性给父级设置box-sizing：border-box; 此时元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制，元素设定的宽度和高度会自动减去边框和内边距得到内容的宽度和高度。

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。