填充 | padding

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;

初始值	as each of the properties of the shorthand: padding-bottom: 0 padding-left: 0 padding-right: 0 padding-top: 0
适用元素	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.
是否是继承属性	no
Percentages	refer 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 type	a length
正规顺序	the unique non-ambiguous order defined by the formal grammar

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

规范

Specification	Status	Comment
CSS Basic Box ModelThe definition of 'padding' in that specification.	Working Draft	No change.
CSS Level 2 (Revision 1)The definition of 'padding' in that specification.	Recommendation	No change.
CSS Level 1The definition of 'padding' in that specification.	Recommendation	Initial definition.

浏览器兼容性

Feature	Chrome	Edge	Firefox (Gecko)	Internet Explorer	Opera	Safari (WebKit)
Basic support	1.0	(Yes)	1.0 (1.0)	4.0	3.5	1.0 (85)

Feature	Android	Edge	Firefox Mobile (Gecko)	IE Phone	Opera Mobile	Safari Mobile
Basic support	?	(Yes)	?	?	?	?

填充 | padding

padding

语法

值

正式语法

示例

简单例子

HTML

CSS

更多的例子

规范

浏览器兼容性