padding | CSS

在此页

组成特性
句法
形式定义
形式句法
范例
规范
浏览器兼容性
另请参阅
相关话题

padding CSS shorthand property sets the padding area on all four sides of an element at once.

The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

An element's padding area is the space between its content and its border.

注意： Padding creates extra space within an element. In contrast, margin creates extra space around an element.

组成特性

此特性是下列 CSS 特性的简写：

句法

/* 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 2em;
/* Global values */
padding: inherit;
padding: initial;
padding: unset;

padding property may be specified using one, two, three, or four values. Each value is a <length> 或 <percentage> . Negative values are invalid.

When one value is specified, it applies the same padding to all four sides .
When two values are specified, the first padding applies to the top and bottom , the second to the left and right .
When three values are specified, the first padding applies to the top , the second to the right and left , the third to the bottom .
When four values are specified, the paddings apply to the top , right , bottom ，和 left in that order (clockwise).

值

<length>
<percentage>: The size of the padding as a percentage, relative to the width of the containing block.

形式定义

初始值	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` and `::first-line` .
继承	no
百分比	refer to the width of the containing block
计算值	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
动画类型	a length

形式句法

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

范例

Setting padding with pixels

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

结果

Setting padding with pixels and percentages

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  */

规范

规范	状态	注释
CSS 基本 Box 模型 The definition of 'padding' in that specification.	工作草案	无变化。
CSS Level 2 (Revision 1) The definition of 'padding' in that specification.	推荐	无变化。
CSS Level 1 The definition of 'padding' in that specification.	推荐	初始定义。

浏览器兼容性

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. 更新 GitHub 上的兼容性数据

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`padding`	Chrome 完整支持 1	Edge 完整支持 12	Firefox 完整支持 1	IE 完整支持 4	Opera 完整支持 3.5	Safari 完整支持 1	WebView Android 完整支持 ≤37	Chrome Android 完整支持 18	Firefox Android 完整支持 4	Opera Android 完整支持 14	Safari iOS 完整支持 1	Samsung Internet Android 完整支持 1.0

图例

完整支持

另请参阅

CSS 基本 Box 模型介绍
padding-top , padding-right , padding-bottom ，和 padding-left .
The mapped logical properties: padding-block-start , padding-block-end , padding-inline-start ，和 padding-inline-end and the shorthands padding-block and padding-inline

元数据

最后修改： Jul 28, 2020

CSS
CSS 参考
CSS Box Model
指南
1. CSS 基本 Box 模型介绍
2. Mastering margin collapsing
特性

在此页