实例



设置 p 元素的 4 个内边距：



p {
  padding:2cm 4cm 3cm 4cm;
  }





定义和用法



padding 简写属性在一个声明中设置所有内边距属性。



说明



这个简写属性设置元素所有内边距的宽度，或者设置各边上内边距的宽度。行内非替换元素上设置的内边距不会影响行高计算；因此，如果一个元素既有内边距又有背景，从视觉上看可能会延伸到其他行，有可能还会与其他内容重叠。元素的背景会延伸穿过内边距。不允许指定负边距值。 

注释：不允许使用负值*。



例子 1



padding:10px 5px 15px 20px;


上内边距是 10px
右内边距是 5px
下内边距是 15px
左内边距是 20px




例子 2



padding:10px 5px 15px;


上内边距是 10px
右内边距和左内边距是 5px
下内边距是 15px




例子 3



padding:10px 5px;


上内边距和下内边距是 10px
右内边距和左内边距是 5px




例子 4



padding:10px;


所有 4 个内边距都是 10px




可能的值




  
值
  
描述



  
auto
  
浏览器计算内边距。


  
length
  
规定以具体单位计的内边距值，比如像素、厘米等。默认值是 0px。


  
%
  
规定基于父元素的宽度的百分比的内边距。


  
inherit
  
规定应该从父元素继承内边距。

元素的内边距在边框和内容区之间。控制该区域最简单的属性是 padding 属性。

CSS padding 属性定义元素边框与元素内容之间的空白区域。

CSS padding 属性

CSS padding 属性定义元素的内边距。padding 属性接受长度值或百分比值，但不允许使用负值。padding是比较常用CSS样式，可以利用padding内边距设置上、下、左、右对象内容与四个边距距离间隔。

语法结构：padding : +数值+单位 或 百分比数值

例如，如果您希望所有 h1 元素的各边都有 10 像素的内边距，只需要这样：

h1 {padding: 10px;}

您还可以按照上、右、下、左的顺序分别设置各边的内边距，各边均可以使用不同的单位或百分比值：

h1 {padding: 10px 0.25em 2ex 20%;}

如上如果提供两个，第一个用于上－下，第二个用于左－右。

如果提供三个，第一个用于上，第二个用于左－右，第三个用于下。

CSS 单边内边距属性

可以通过使用下面四个单独的属性，分别设置上、右、下、左内边距：padding-top、padding-right、padding-bottom、padding-left

1、padding-left 设置对象距离左边的边距补白间隔

2、padding-right 设置对象距离右边的边距补白间隔

3、padding-top 设置对象距离上边的边距补白间隔

4、padding-bottom 设置对象距离下边的边距补白间隔

您也许已经想到了，下面的规则实现的效果与上面的简写规则是完全相同的：

h1 {
padding-top: 10px;
padding-right: 0.25em;
padding-bottom: 2ex;
padding-left: 20%;
}

试想下，如果“三边相同，一边值不同”你还会如何编写样式呢？

根据实践经验，如果仅仅是上面这些处理，往往是无法应对实际需求的，存在一些“致命问题”。新建一个前端学习qun438905713，在群里大多数都是零基础学习者，大家相互帮助，相互解答，并且还准备很多学习资料，欢迎零基础的小伙伴来一起交流。

CSS 内边距的百分比数值

前面提到过，可以为元素的内边距设置百分数值。百分数值是相对于其父元素的 width 计算的，这一点与外边距一样。所以，如果父元素的 width 改变，它们也会改变。

下面这条规则把段落的内边距设置为父元素 width 的 10%：

p {padding: 10%;}

例如：如果一个段落的父元素是 div 元素，宽度为200px，那么这个段落的内边距设置为padding:10%，相当于padding:20px

注意：上下内边距与左右内边距一致；即上下内边距的百分数会相对于父元素宽度设置，而不是相对于高度。

Padding属性是在网站建设的过程中是必不可少的，它的主要作用就是设定对象四边的补丁边距，padding可以说给我们带来的麻烦不少，最大的一个就是浏览器兼容性问题，这里先抛开这个不说了，单来分析一下padding中参数属性的作用规则，也就是哪个参数对应哪个补丁，从例子说起。
test{padding:10px 12px 14px 16px}
这里所有的参数都有了，那么它们的作用顺序是上右下左。
Test{padding:10px 12px 14px}
这里有3个参数，那么它们的作用顺序是第一个参数是用于上方，第二个参数是用于左右方向，第三个参数是用于下方。
Test{padding: 10px 12px}
这里是只有2个参数的时候，第一个参数是作用于上下方向，第二个参数是左右方向。
Test{padding:10px;}
只有一个参数的时候，是作用于四个方向。
小小整理，如果不当之处请大家指正.

定义
padding属性是用于在一个声明中设置所有padding属性的简写属性。
注释：不允许使用负值。
继承性：No
 

JavaScript 语法
CSS属性也可通过一段JavaScript被动态地改变。
脚本语法：
object.style.padding="2cm"
在我们的HTML DOM教程中，您可以找到更多有关padding属性的细节。
在我们的HTML DOM教程中，您也可以找到完整的Style对象参考手册。


例子
四个边的padding均为10px：
h1 {padding: 10px}
顶边和底边的padding为10px，左边和右边的padding是父元素宽度的2%：
h1 {padding: 10px 2%}
顶边的padding为10px，左边和右边的padding是父元素宽度的2%，底边的padding是15px：
h1 {padding: 10px 2% 15px}
顶边的padding为10px，右边的padding是父元素宽度的2%，底边的padding是15px，而左边的padding是20px：
h1 {padding: 10px 2% 15px 20px}


可能的值
值
            
描述
        

            
padding-top 
                
padding-right 
                
padding-bottom 
                
padding-left 
            
            

            
设置填充padding。
            
值可以是：
            
百分比（基于父元素宽度的百分比） 
                
长度值（固定的padding值） 
            
默认值：未定义。
            
        

TIY 实例
所有填充属性在一个声明中 
本例演示使用简写属性将所有的填充属性设置于一个声明中，可以有一到四个值。