目录

CSS padding 属性


示例

将 <p> 元素的所有四个边的填充设置为 35 像素:

p {
  padding: 35px;
}
亲自试一试 »

下面有更多 "亲自试一试" 示例。


定义和用法

元素的内边距是其内容与其边框之间的空间。

这个paddingproperty 是以下属性的简写:

笔记:填充会在元素内创建额外的空间,而边距会在元素周围创建额外的空间。

该属性可以有一到四个值。

如果 padding 属性有四个值:

  • 内边距:10px 5px 15px 20px;
    • 顶部内边距为 10px
    • 右内边距为 5px
    • 底部内边距为 15px
    • 左内边距为 20px

如果 padding 属性具有三个值:

  • 内边距:10px 5px 15px;
    • 顶部内边距为 10px
    • 左右内边距均为 5px
    • 底部内边距为 15px

如果 padding 属性有两个值:

  • 内边距:10px 5px;
    • 顶部和底部内边距均为 10px
    • 左右内边距均为 5px

如果 padding 属性只有一个值:

  • 内边距:10px;
    • 所有四个内边距均为 10px

笔记:不允许使用负值。

展示演示❯

默认值: 0
遗传:
可动画: 是的,查看各个属性阅读可动画的尝试一下
版本: CSS1
JavaScript 语法: 对象.style.padding="100px 20px"尝试一下

浏览器支持

表中的数字指定完全支持该属性的第一个浏览器版本。

Property
padding 1.0 4.0 1.0 1.0 3.5


CSS 语法

padding: length|initial|inherit;

属性值

Value Description Demo
length Specifies the padding in px, pt, cm, etc. Default value is 0. Read about length units Demo ❯
% Specifies the padding in percent of the width of the containing element Demo ❯
initial Sets this property to its default value. Read about initial
inherit Inherits this property from its parent element. Read about inherit

更多示例

示例

将 <p> 元素的内边距设置为顶部和底部 35 像素,右侧和左侧 70 像素:

p {
  padding: 35px 70px;
}
亲自试一试 »

示例

将 <p> 元素的内边距设置为顶部 35 像素、右侧和左侧 70 像素、底部 50 像素:

p {
  padding: 35px 70px 50px;
}
亲自试一试 »

示例

将 <p> 元素的内边距设置为顶部 35 像素、右侧 70 像素、底部 50 像素、左侧 90 像素:

p {
  padding: 35px 70px 50px 90px;
}
亲自试一试 »

相关页面

CSS教程:CSS 填充

CSS教程:CSS 盒子模型

HTML DOM 参考:填充属性