CSS 填充(Padding)
CSS Padding 属性
CSS的 padding
属性是用于生成空间的内容。
填充属性设置大小的元素内容和元素之间的空格。
这个元素有50px的填充空间。
CSS Padding(填充)
CSS padding(填充)属性定义元素边框与元素内容之间的空间。
CSS padding(填充)属性清除元素的内容(边框内部)周围的区域。
![]() |
提示: 当元素的 padding(填充)(内边距)被清除时,所 "释放" 的区域将会受到元素背景颜色的填充。 |
---|
Padding - 单边内边距属性
在CSS中,它可以指定不同的侧面不同的填充:
padding-top
padding-right
padding-bottom
padding-left
所有的padding(填充)属性可以具有以下值:
- length - 定义一个固定的填充(像素,pt,em等)
- % - 使用百分比值定义一个填充
- inherit - 指定该填充集成父元素
下面的实例对
元素的四个侧边距进行设置填充:
Example
p {
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;
}
尝试一下 »
Padding - 简写
为了缩短代码,它可以在一个属性中指定的所有填充属性。
padding
属性是下列单个填充属性的简写属性:
padding-top
padding-right
padding-bottom
padding-left
padding
属性可以有一到四个值:
- 上填充为25px
- 右填充为50px
- 下填充为75px
- 左填充为100px
padding:25px 50px 75px;
- 上填充为25px
- 左右填充为50px
- 下填充为75px
padding:25px 50px;
- 上下填充为25px
- 左右填充为50px
padding:25px;
- 所有的填充都是25px

更多实例
在一个声明中的所有填充属性
这个例子演示了使用缩写属性设置在一个声明中的所有填充属性,可以有一到四个值。
设置左部填充
这个例子演示了如何设置元素左填充。
设置右部填充
这个例子演示了如何设置元素右填充。
设置上部填充
这个例子演示了如何设置元素上填充。
设置下部填充
这个例子演示了如何设置元素下填充。
所有的CSS填充属性
属性 | 描述 |
---|---|
padding | 使用缩写属性设置在一个声明中的所有填充属性 |
padding-bottom | 设置元素的底部填充 |
padding-left | 设置元素的左部填充 |
padding-right | 设置元素的右部填充 |
padding-top | 设置元素的顶部填充 |