padding

padding CSS 简写属性 同时设置元素所有四边的填充区域。

试试看

元素的填充区域是其内容与其边框之间的空间。

注意：填充在元素内部创建额外的空间。相反，margin 在元素周围创建额外的空间。

组成属性

此属性是以下 CSS 属性的简写

语法

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

/* top and bottom | left and right */
padding: 5% 10%;

/* top | left and right | bottom */
padding: 1em 2em 2em;

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

/* Global values */
padding: inherit;
padding: initial;
padding: revert;
padding: revert-layer;
padding: unset;

padding 属性可以使用一个、两个、三个或四个值来指定。每个值都是一个<length> 或一个<percentage>。负值无效。

  • 当指定一个值时，它会将相同的填充应用于所有四个边。
  • 当指定两个值时，第一个填充应用于顶部和底部，第二个应用于左侧和右侧。
  • 当指定三个值时，第一个填充应用于顶部，第二个应用于右侧和左侧，第三个应用于底部。
  • 当指定四个值时，填充按此顺序（顺时针）应用于顶部、右侧、底部和左侧。

值

<length>

填充大小作为固定值。

<percentage>

填充大小作为百分比，相对于writing-mode定义的包含块的内联大小（水平语言中的宽度）。

正式定义

初始值作为简写属性的每个属性
应用于所有元素，除了table-row-group、table-header-group、table-footer-group、table-row、table-column-group 和 table-column。它也应用于::first-letter 和::first-line。
继承否
百分比指的是包含块的宽度
计算值作为简写属性的每个属性
动画类型一个长度

正式语法

padding = 
  <'padding-top'>{1,4}  

<padding-top> = 
  <length-percentage [0,∞]>  

<length-percentage> = 
  <length>      |
  <percentage>

示例

使用像素设置填充

HTML

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

CSS

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

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

结果

使用像素和百分比设置填充

css
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 盒模型模块级别 3
# padding-shorthand

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅