css 左右内边距溢出

CSS里有一个属性叫作padding，它是用来设置元素内部内容与边框之间的距离。当我们设置了一个元素的左右padding值时，有可能会出现左右内边距溢出的情况。

什么是左右内边距溢出呢？假如我们有一个300px宽的容器，我们给它的左右padding值都设为20px。这时候该容器的宽度似乎应该是340px，但实际上它的宽度始终是300px，只不过内部的内容向中间收缩了一下，让左右的20px的空间"露"出来了。

这种情况的解决方法有许多，下面介绍一些常见的方法：

.box {
    width: 300px;
    padding: 0 20px;
    box-sizing: border-box;
}

这里我们知道，元素的宽度等于内容宽度+padding宽度+边框宽度。那我们可以修改box-sizing属性为border-box，这时候元素包括内容在内的宽度就会被整个算入300px的宽度之内了。

.box {
    width: calc(300px - 40px);
    padding: 0 20px;
}

我们也可以使用calc函数进行计算。上面的代码中，我们让该元素宽度等于300px减去左右的20px的padding宽度，即260px。

.outer-box {
    overflow: hidden;
}
.inner-box {
    width: 320px;
    margin: 0 -10px;
    padding: 0 20px;
}
    

以上是一种更为"骚气"的做法。让元素的容器设置overflow:hidden属性，让元素外部的溢出部分被隐藏起来。让元素内部的宽度为320px，然后让元素内部向外扩展10px，使用margin负值实现。最后再在内部设置20px的padding值即可。

总之，左右内边距溢出的问题并不算很严重，我们可以根据自身项目需求和代码习惯自行决定如何解决。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！