padding

总结

padding属性设置一个元素的内边距,padding 区域指一个元素的内容和其边界之间的空间,该属性不能为负值。

padding简写属性可以避免分别设置每个边的内边距

初始值as each of the properties of the shorthand:
适用元素all elements, except table-row-group, table-header-group, table-footer-group, table-row, table-column-group and table-column. It also applies to ::first-letter.
是否是继承属性
Percentagesrefer to the width of the containing block
适用媒体visual
计算值as each of the properties of the shorthand:
  • padding-bottom: the percentage as specified or the absolute length
  • padding-left: the percentage as specified or the absolute length
  • padding-right: the percentage as specified or the absolute length
  • padding-top: the percentage as specified or the absolute length
Animation typea length
正规顺序the unique non-ambiguous order defined by the formal grammar

语法

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

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

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

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

padding: inherit;

取值

指定一个,两个,三个或四个下列的值:

<长度>
可指定非负的固定宽度. See <length> for details.
<百分比>
相对于包含块的宽度
  • 指定一个值时 该值指定四个边的内边距
  • 指定两个值时 第一个值指定上下两边的内边距 第二个指定左右两边的内边距
  • 指定三个值时 第一个指定上边的内边距.第二个指定左右两边 第三个指定下边
  • 指定四个值时分别为上 右 下 左(顺时针顺序)

Formal syntax

[ <length> | <percentage> ]{1,4}

例子

 padding: 5%;                /* 所有边给 5% padding */
 padding: 10px;              /* 所有边给 10px padding */
 padding: 10px 20px;         /*  top and bottom 10px padding  */
                            /*  left and right 20px 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  */

border:outset; padding:5% 1em;

Live Sample

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;
}

Live Sample Link

规格

规格 状态 注释
CSS Basic Box Model
padding
Working Draft 无改变.
CSS Level 2 (Revision 1)
padding-top
Recommendation 无改变 .
CSS Level 1
padding
Recommendation 初始定义

浏览器兼容性

性能 Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 1.0 1.0 (1.0) 4.0 3.5 1.0 (85)
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support ? ? ? ? ?

See also

文档标签和贡献者

 最后编辑者: ZZES_REN,