建站
咨詢
售后
建站咨詢
新聞中心
這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
CSSpadding（內(nèi)邊距）
內(nèi)邊距（padding）是指元素內(nèi)容區(qū)與邊框之間的區(qū)域，與外邊距不同，內(nèi)邊距會(huì)受到背景屬性的影響。您可以通過下面的屬性來設(shè)置元素內(nèi)邊距的尺寸：
圖：padding-top、padding-bottom、padding-left、padding-right 屬性演示
圖：padding 屬性演示
網(wǎng)站建設(shè)公司,為您提供網(wǎng)站建設(shè),網(wǎng)站制作,網(wǎng)頁設(shè)計(jì)及定制網(wǎng)站建設(shè)服務(wù),專注于成都定制網(wǎng)站,高端網(wǎng)頁制作,對成都人造霧等多個(gè)行業(yè)擁有豐富的網(wǎng)站建設(shè)經(jīng)驗(yàn)的網(wǎng)站建設(shè)公司。專業(yè)網(wǎng)站設(shè)計(jì),網(wǎng)站優(yōu)化推廣哪家好,專業(yè)成都網(wǎng)站推廣優(yōu)化,H5建站,響應(yīng)式網(wǎng)站。
- padding-top：設(shè)置元素內(nèi)容區(qū)上方的內(nèi)邊距；
- padding-right：設(shè)置元素內(nèi)容區(qū)右側(cè)的內(nèi)邊距；
- padding-bottom：設(shè)置元素內(nèi)容區(qū)下方的內(nèi)邊距；
- padding-left：設(shè)置元素內(nèi)容區(qū)左側(cè)的內(nèi)邊距；
- padding：內(nèi)邊距屬性的縮寫形式，可以同時(shí)設(shè)置上下左右四個(gè)方向上的內(nèi)邊距。
上述屬性的可選值如下表所示：
| 值 | 說明 |
|---|---|
| length | 使用具體數(shù)值配合 px、cm 等單位來定義元素內(nèi)邊距的尺寸，不能為負(fù)值，默認(rèn)值為 0px |
| % | 定義基于父元素的寬度百分比的內(nèi)邊距，不能為負(fù)值 |
| inherit | 從父元素繼承內(nèi)邊距屬性的值 |
定義各個(gè)方向上的內(nèi)邊距
您可以使用 padding-top、padding-bottom、padding-left 和 padding-right 屬性來分別設(shè)置元素上下左右四個(gè)方向上的內(nèi)邊距。
【示例】分別定義元素上下左右四個(gè)方向上的內(nèi)邊距：
padding-top: 10px;
padding-bottom: 2em;
padding-left: 1cm;
padding-right: 3ex;
運(yùn)行結(jié)果如下圖所示：
圖：padding-top、padding-bottom、padding-left、padding-right 屬性演示
內(nèi)邊距簡寫形式
padding 屬性是其余四個(gè)屬性的簡寫形式，在實(shí)際開發(fā)中我們使用最多的也是這個(gè)簡寫屬性。與 margin 屬性相似，paddiing 屬性同樣可以接受 1~4 個(gè)參數(shù)（參數(shù)之間使用空格分隔）：
- 如果提供四個(gè)參數(shù)，那么將按照上、右、下、左的順序依次設(shè)置元素四個(gè)方向上的內(nèi)邊距；
- 如果提供三個(gè)參數(shù)，那么第一個(gè)參數(shù)將用來設(shè)置元素上方的內(nèi)邊距，第二個(gè)參數(shù)將用來設(shè)置元素左、右兩個(gè)方向上的內(nèi)邊距，第三個(gè)參數(shù)將用來設(shè)置元素下方的內(nèi)邊距；
- 如果提供兩個(gè)參數(shù)，那么第一個(gè)參數(shù)將用來設(shè)置元素上、下兩個(gè)方向上的內(nèi)邊距，第二個(gè)參數(shù)用來設(shè)置元素左、右兩個(gè)方向上的內(nèi)邊距；
- 如果只提供一個(gè)參數(shù)，那么這個(gè)參數(shù)將同時(shí)作用于元素四個(gè)方向上的外邊距。
【示例】使用 padding 屬性為元素設(shè)置內(nèi)邊距：
padding: 10px 3ex 2em 1cm;
運(yùn)行結(jié)果如下圖所示：
圖：padding 屬性演示
本文名稱：CSSpadding（內(nèi)邊距）
本文鏈接：http://m.5511xx.com/article/dpoeopc.html
