填充 | padding

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

/* Apply to all four sides */
padding: 1em;

/* vertical | horizontal */
padding: 5% 10%;

/* top | horizontal | bottom */
padding: 1em 2em 2em;

/* top | right | bottom | left */
padding: 5px 1em 0 1em;

/* Global values */
padding: inherit;
padding: initial;
padding: unset;

• padding-bottom：0

• padding-left：0

• padding-right：0

• padding-top：0

Applies to 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`](::first-letter).   [Inherited](inheritance) no   Percentages refer to the width of the containing block   Media visual   [Computed value](computed_value) as each of the properties of the shorthand:

• padding-bottom：指定的百分比或绝对长度

• padding-left：指定的百分比或绝对长度

• padding-right：指定的百分比或绝对长度

• padding-top：指定的百分比或绝对长度

Animation type a [length](length#Interpolation)    Canonical order the unique non-ambiguous order defined by the formal grammar  

语法

该padding属性可以使用一个，两个，三个或四个值来指定。每个值是一个<length>或一个<percentage>。

• 当指定一个值时，它将在所有四条边上应用相同的填充。

• 当指定了两个值时，第一个填充用于顶部和底部，第二个填充用于左侧和右侧。

• 当指定三个值时，第一个填充适用于顶部，第二个填充适用于顶部，第二个填充适用于左侧和第三个底部。

• 当指定四个值时，填充顺序应用于顶部，右侧，底部和左侧（顺时针）。

值

<length>可指定非负的固定宽度. See<length>for details. <percentage>相对于包含块的宽度

正式语法

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

示例

简单例子

HTML

<h4>This element has moderate padding.</h4>
<h3>The padding is huge in this element!</h3>

CSS

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

h3 {
  background-color: cyan;
  padding: 110px 50px 50px 110px;
}

更多的例子

padding: 5%;                /* all sides: 5% padding */

padding: 10px;              /* all sides: 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  */ 

规范

浏览器兼容性