CSS 內邊距
內邊距用於在元素的任何定義的邊框內部，在其內容周圍建立空間。
該元素的內邊距為 70px。
自己動手試一試 »
CSS 內邊距
CSS padding 屬性用於在元素的任何定義的邊框內部，在其內容周圍建立空間。
使用 CSS，您可以完全控制內邊距。有用於設定元素每側內邊距（上、右、下、左）的屬性。
內邊距 - 單獨的邊
CSS 具有用於指定元素每側內邊距的屬性
padding-toppadding-rightpadding-bottompadding-left
所有內邊距屬性都可以具有以下值
- length - 以 px、pt、cm 等為單位指定內邊距。
- % - 指定包含元素的寬度的百分比作為內邊距。
- inherit - 指定內邊距應從父元素繼承。
注意：不允許負值。
示例
為 <div> 元素的四個側面設定不同的內邊距：
div {
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;
}
自己動手試一試 »
內邊距 - 簡寫屬性
為了縮短程式碼，可以將所有內邊距屬性寫在一個屬性中。
padding 屬性是以下單獨內邊距屬性的簡寫屬性
padding-toppadding-rightpadding-bottompadding-left
所以，它是這樣工作的
如果 padding 屬性有四個值
- padding: 25px 50px 75px 100px;
- 上內邊距為 25px
- 右內邊距為 50px
- 下內邊距為 75px
- 左內邊距為 100px
如果 padding 屬性有三個值
- padding: 25px 50px 75px;
- 上內邊距為 25px
- 右內邊距和左內邊距均為 50px
- 下內邊距為 75px
如果 padding 屬性有兩個值
- padding: 25px 50px;
- 上內邊距和下內邊距均為 25px
- 右內邊距和左內邊距均為 50px
如果 padding 屬性有一個值
- padding: 25px;
- 四個內邊距均為 25px
內邊距和元素寬度
CSS width 屬性指定元素內容區域的寬度。內容區域是元素內邊距、邊框和外邊距內部的部分（盒子模型）。
因此，如果一個元素指定了寬度，新增到該元素的內邊距將計入元素的總寬度。這通常是使用者不希望的結果。
示例
在這裡，<div> 元素的寬度被設為 300px。但是，<div> 元素的實際寬度將是 350px（300px + 25px 的左內邊距 + 25px 的右內邊距）。
div {
width: 300px;
padding: 25px;
}
自己動手試一試 »
要使寬度保持在 300px，無論內邊距多少，您都可以使用 box-sizing 屬性。這會導致元素保持其實際寬度；如果您增加內邊距，可用內容空間將減小。
示例
使用 box-sizing 屬性將寬度保持在 300px，無論內邊距多少
div {
width: 300px;
padding: 25px;
box-sizing: border-box;
}
自己動手試一試 »
更多示例
設定左內邊距
此示例演示瞭如何設定 <p> 元素的左內邊距。
設定右內邊距
此示例演示瞭如何設定 <p> 元素的右內邊距。
設定上內邊距
此示例演示瞭如何設定 <p> 元素的上內邊距。
設定下內邊距
此示例演示瞭如何設定 <p> 元素的下內邊距。
所有 CSS 內邊距屬性
| 屬性 | 描述 |
|---|---|
| padding | 在一個宣告中設定所有內邊距屬性的簡寫屬性 |
| padding-bottom | 設定元素的下內邊距 |
| padding-left | 設定元素的左內邊距 |
| padding-right | 設定元素的右內邊距 |
| padding-top | 設定元素的上內邊距 |
