CSS中的左右內(nèi)間距是指元素內(nèi)部距離其左右邊緣的距離,可以通過(guò)padding-left和padding-right來(lái)控制。如下代碼:
.example { padding-left: 10px; padding-right: 20px; }
這將會(huì)在example元素的左邊緣和內(nèi)容之間添加10像素的內(nèi)間距,在右邊緣和內(nèi)容之間添加20像素的內(nèi)間距。
如果想要為一個(gè)元素添加相同的左右內(nèi)間距,可以使用padding屬性:
.example { padding: 0 20px; }
這將會(huì)在example元素的左右邊緣和內(nèi)容之間添加20像素的內(nèi)間距。
值得注意的是,設(shè)置元素的寬度時(shí)應(yīng)該考慮到內(nèi)間距的影響。例如,下面例子中,.example的實(shí)際寬度為150像素(120像素的內(nèi)容寬度+15像素的左內(nèi)間距和15像素的右內(nèi)間距):
.example { width: 120px; padding: 0 15px; }
在計(jì)算盒模型時(shí),內(nèi)間距的值也應(yīng)該考慮進(jìn)來(lái)。例如,下面例子中,.example的實(shí)際高度為140像素(100像素的內(nèi)容高度+20像素的上內(nèi)間距和20像素的下內(nèi)間距):
.example { height: 100px; padding: 20px 0; }
因此,在設(shè)計(jì)和布局網(wǎng)頁(yè)時(shí),應(yīng)該認(rèn)真考慮元素的內(nèi)外間距對(duì)最終效果的影響。