CSS里有一個(gè)屬性叫作padding，它是用來設(shè)置元素內(nèi)部?jī)?nèi)容與邊框之間的距離。當(dāng)我們?cè)O(shè)置了一個(gè)元素的左右padding值時(shí)，有可能會(huì)出現(xiàn)左右內(nèi)邊距溢出的情況。

什么是左右內(nèi)邊距溢出呢？假如我們有一個(gè)300px寬的容器，我們給它的左右padding值都設(shè)為20px。這時(shí)候該容器的寬度似乎應(yīng)該是340px，但實(shí)際上它的寬度始終是300px，只不過內(nèi)部的內(nèi)容向中間收縮了一下，讓左右的20px的空間"露"出來了。

這種情況的解決方法有許多，下面介紹一些常見的方法：

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

這里我們知道，元素的寬度等于內(nèi)容寬度+padding寬度+邊框?qū)挾?。那我們可以修改box-sizing屬性為border-box，這時(shí)候元素包括內(nèi)容在內(nèi)的寬度就會(huì)被整個(gè)算入300px的寬度之內(nèi)了。

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

我們也可以使用calc函數(shù)進(jìn)行計(jì)算。上面的代碼中，我們讓該元素寬度等于300px減去左右的20px的padding寬度，即260px。

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

以上是一種更為"騷氣"的做法。讓元素的容器設(shè)置overflow:hidden屬性，讓元素外部的溢出部分被隱藏起來。讓元素內(nèi)部的寬度為320px，然后讓元素內(nèi)部向外擴(kuò)展10px，使用margin負(fù)值實(shí)現(xiàn)。最后再在內(nèi)部設(shè)置20px的padding值即可。

總之，左右內(nèi)邊距溢出的問題并不算很嚴(yán)重，我們可以根據(jù)自身項(xiàng)目需求和代碼習(xí)慣自行決定如何解決。