CSS padding 属性
更多“自己尝试”的例子见下文。
定义和用法
元素的 padding 是其内容和边框之间的空间。
padding 属性是以下属性的简写属性：
注意： padding 在元素内创建额外空间，而 margin 在元素周围创建额外空间。
此属性可以有从一到四个值。
如果 padding 属性有四个值
- padding:10px 5px 15px 20px;
- top padding 为 10px
- right padding 为 5px
- bottom padding 为 15px
- left padding 为 20px
如果 padding 属性有三个值
- padding:10px 5px 15px;
- top padding 为 10px
- right 和 left padding 为 5px
- bottom padding 为 15px
如果 padding 属性有两个值
- padding:10px 5px;
- top 和 bottom padding 为 10px
- right 和 left padding 为 5px
如果 padding 属性有一个值
- padding:10px;
- 所有四个 padding 均为 10px
注意：不允许负值。
| 默认值 | 0 |
|---|---|
| 继承 | no |
| 可动画 | 是的，请参阅单个属性。 阅读关于可动画属性 尝试一下 |
| 版本 | CSS1 |
| JavaScript 语法 | object.style.padding="100px 20px" 尝试一下 |
浏览器支持
表中的数字指定了完全支持该属性的第一个浏览器版本。
| 属性 | |||||
|---|---|---|---|---|---|
| padding | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 |
CSS 语法
padding: length|initial|inherit;
属性值
| 值 | 描述 | 演示 |
|---|---|---|
| length | 指定以 px、pt、cm 等为单位的 padding。默认值为 0。 阅读关于长度单位 | 演示 ❯ |
| % | 指定相对于包含块元素宽度的百分比内边距。 | 演示 ❯ |
| initial | 将此属性设置为其默认值。阅读关于initial | |
| inherit | 从其父元素继承此属性。阅读关于inherit |
更多示例
示例
将 <p> 元素的 top 和 bottom padding 设置为 35 像素，right 和 left 设置为 70 像素
p {
padding: 35px 70px;
}
自己动手试一试 »
示例
将 <p> 元素的 top padding 设置为 35 像素，right 和 left 设置为 70 像素，bottom 设置为 50 像素
p {
padding: 35px 70px 50px;
}
自己动手试一试 »
示例
将 <p> 元素的 top padding 设置为 35 像素，right 设置为 70 像素，bottom 设置为 50 像素，left 设置为 90 像素
p {
padding: 35px 70px 50px 90px;
}
自己动手试一试 »
相关页面
CSS 教程： CSS 内边距
CSS 教程： CSS 盒子模型
HTML DOM 参考： padding 属性
