padding

padding属性设置一个元素的内边距，padding 区域指一个元素的内容和其边界之间的空间，该属性不能为负值。padding简写属性可以避免分别设置每个边的内边距

示例 

/* 应用于四个边 */
padding: 1em;

/* 垂直方向 |  水平方向*/
padding: 5% 10%;

/* 顶部 |  水平方向 |  底部*/
padding: 1em 2em 2em; 

/* 顶部 |  右边 |  底部 |  左边*/
padding: 2px 1em 0 1em;

padding: inherit;

浏览器支持

IE浏览器 火狐浏览器 opera浏览器 chrome浏览器 safari浏览器
浏览器都支持 padding

语法

padding :[ <length> | <percentage> ]{1,4}
  • 指定一个值时该值指定四个边的内边距
  • 指定两个值时第一个值指定上下两边的内边距第二个指定左右两边的内边距
  • 指定三个值时第一个指定上边的内边距。第二个指定左右两边第三个指定下边
  • 指定四个值时分别为上右下左（顺时针顺序）

取值：

  • <length> ：可指定非负的固定宽度。不允许负值。参见 <length> 。
  • <percentage> ：相对于包含块的宽度。不允许负值。参见 <percentage> 。
默认值 作为速记的每一个属性：
适用于 所有元素，除 table-row-group | table-header-group | table-footer-group | table-column-group | table-row 外
继承性 无
动画性 是
计算值 指定值

例子 

padding: 5%;                /* 所有边给 5% padding */
padding: 10px;              /* 所有边给 10px padding */
padding: 10px 20px;         /*  top and bottom 10px padding  */
padding: 10px 3% 20px;      /*  top 10px padding left and right 3% padding bottom 20px padding */
padding: 1em 3px 30px 5px;  /*  top    1em  padding  */
                            /*  right  3px  padding  */
                            /*  bottom 30px padding  */
                            /*  left   5px  padding  */

//HTML

<h4>hello world!</h4>
<h3>the padding is different in this line.</h3>

//CSS

h4{
  background-color: green;
  padding: 50px 20px 20px 50px;
}

h3{
  background-color: blue;
  padding: 400px 50px 50px 400px;
}

下篇： padding-top