CSS 內邊距
此元素的內邊距為 70px。
CSS 內邊距
CSS padding 屬性用于在任何定義的邊界內的元素內容周圍生成空間。
通過 CSS，您可以完全控制內邊距（填充）。有一些屬性可以為元素的每一側（上、右、下和左側）設置內邊距。
Padding - 單獨的邊
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 屬性是以下各內邊距屬性的簡寫屬性：
padding-toppadding-rightpadding-bottompadding-left
工作原理是這樣的：
如果 padding 屬性有四個值：
- padding: 25px 50px 75px 100px;
- 上內邊距是 25px
- 右內邊距是 50px
- 下內邊距是 75px
- 左內邊距是 100px
實例
使用設置了四個值的 padding 簡寫屬性：
div {
padding: 25px 50px 75px 100px;
}
如果 padding 屬性設置了三個值：
- padding: 25px 50px 75px;
- 上內邊距是 25px
- 右和左內邊距是 50px
- 下內邊距是 75px
實例
使用設置了三個值的 padding 簡寫屬性：
div {
padding: 25px 50px 75px;
}
如果 padding 屬性設置了兩個值：
- padding: 25px 50px;
- 上和下內邊距是 25px
- 右和左內邊距是 50px
實例
使用設置了兩個值的 padding 簡寫屬性：
div {
padding: 25px 50px;
}
如果 padding 屬性設置了一個值：
- padding: 25px;
- 所有四個內邊距都是 25px
實例
使用設置了一個值的 padding 簡寫屬性：
div {
padding: 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;
}
更多實例
所有 CSS 內邊距屬性
| 屬性 | 描述 |
|---|---|
| padding | 用于在一條聲明中設置所有內邊距屬性的簡寫屬性。 |
| padding-bottom | 設置元素的下內邊距。 |
| padding-left | 設置元素的左內邊距。 |
| padding-right | 設置元素的右內邊距。 |
| padding-top | 設置元素的上內邊距。 |
延伸閱讀
課外書：框模型：CSS 內邊距
