讲解一、
定义和用法：padding 简写属性在一个声明中设置所有内边距属性。
说明：这个简写属性设置元素所有内边距的宽度，或者设置各边上内边距的宽度。行内非替换元素上设置的内边距不会影响行高计算；因此，如果一个元素既有内边距又有背景，从视觉上看可能会延伸到其他行，有可能还会与其他内容重叠。元素的背景会延伸穿过内边距。不允许指定负边距值。
注释：不允许使用负值。
默认值：0
继承性：no
版本：CSS1
JavaScript 语法：object.style.padding="10px 5px"
例子 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
实例
设置 p 元素的 4 个内边距：p{padding:2cm 4cm 3cm 4cm;}
浏览器支持
所有浏览器都支持 padding 属性。
注释：任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 "inherit"。
讲解二、
元素的内边距在边框和内容区之间。控制该区域最简单的属性是 padding 属性。
CSS padding 属性定义元素边框与元素内容之间的空白区域。
CSS padding 属性
CSS padding 属性定义元素的内边距。padding 属性接受长度值或百分比值，但不允许使用负值。
例如，如果您希望所有 h1 元素的各边都有 10 像素的内边距，只需要这样：
h1 {padding: 10px;}
您还可以按照上、右、下、左的顺序分别设置各边的内边距，各边均可以使用不同的单位或百分比值：
h1 {padding: 10px 0.25em 2ex 20%;}
单边内边距属性
也通过使用下面四个单独的属性，分别设置上、右、下、左内边距：
- padding-top
- padding-right
- padding-bottom
- padding-left
您也许已经想到了，下面的规则实现的效果与上面的简写规则是完全相同的：
h1 {
padding-top: 10px;
padding-right: 0.25em;
padding-bottom: 2ex;
padding-left: 20%;
}
内边距的百分比数值
前面提到过，可以为元素的内边距设置百分数值。百分数值是相对于其父元素的 width 计算的，这一点与外边距一样。所以，如果父元素的 width 改变，它们也会改变。
下面这条规则把段落的内边距设置为父元素 width 的 10%：p {padding: 10%;}
例如：如果一个段落的父元素是 div 元素，那么它的内边距要根据 div 的 width 计算。
<div style=" 200px;">
<p>This paragragh is contained within a DIV that has a width of 200 pixels.</p>
</div>
注意：上下内边距与左右内边距一致；即上下内边距的百分数会相对于父元素宽度设置，而不是相对于高度。
讲解三、
HTML DOM padding 属性
定义和用法
padding 属性设置元素的内边距。
padding 属性定义元素边框与元素内容之间的空间。
该属性可采取 4 个值：
如果规定一个值，比如 div {padding: 50px} - 所有四个边的 padding 都是 50 px。
如果规定两个值，比如 div {padding: 50px 10px} - 上下内边距是 50 px，左右内边距是 10 px。
如果规定三个值，比如 div {padding: 50px 10px 20px}-上内边距是 50px,左右内边距是 10 px，下内边距是20px。
如果规定四个值，比如 div {padding: 50px 10px 20px 30px} - 上内边距是 50 px，右内边距是 10 px，下内边距是 20 px，左内边距是 30 px。
语法：
Object.style.padding=padding
Possible Values
padding设置内边距。
值可以是：
- 百分比（基于父对象总高度或宽度的百分比）
- 长度值（定义一个固定的边距）
- auto（浏览器设定的值）。
实例
本例改变元素的内边距：
Code