CSS 内边距
内边距用于在元素内容周围创建空间，位于任何已定义的边框内。
此元素的内边距为 70px。
自己尝试一下 »
CSS 内边距
CSS padding 属性用于在元素内容周围生成空间，位于任何已定义的边框内。
使用 CSS，您可以完全控制内边距。有用于设置元素每一边（顶部、右侧、底部和左侧）内边距的属性。
内边距 - 单独的边
CSS 有属性用于指定元素每一边的内边距
padding-toppadding-rightpadding-bottompadding-left
所有内边距属性都可以具有以下值
- 长度 - 以 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 | 设置元素的顶部填充 |
