CSS内边距

上一节中，我们讲了外边距margin，它们两个之间有什么区别呢，下面我们来举一个例子：

想象你要显示的内容（element）被一个盒子包围住，这个盒子除了长和宽（height和width）之外，还有边框（border）。什么是内边距呢？你看下面的图，你的内容离你的边框是不是有一段距离？这段距离就是内边距。那什么是外边距呢？想象有两个盒子，两个盒子放在一起，那它们之间是不是也要有一段距离？没错，这就是外边距。

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="width: 200px;">

<p>This paragragh is contained within a DIV that has a width of 200 pixels.</p>

 </div> 

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

CSS 内边距属性

属性描述

padding 简写属性。作用是在一个声明中设置元素的所内边距属性。

padding-bottom 设置元素的下内边距。

padding-left 设置元素的左内边距。

padding-right 设置元素的右内边距。

padding-top 设置元素的上内边距。

Padding样式是我们使用频率比较高的CSS样式属性，一般设置对象内上、下、左、右边距间隔我们就要用到padding，当然如果遇到开头文字缩进我们可以使用css text-indent样式。使用padding时候注意宽度增减，padding是要占用宽度和高度，如果总宽度为500px,左右设置了10px的padding样式，这样内容区域宽度就会变为480px。同时注意缩写PADDING样式时候代表意义，尽量适使用CSS缩写样式节约CSS代码。