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 | 设置元素的上内边距 |
