CSS | padding-block 属性

简介

padding-block 属性是一种 CSS 盒模型属性，用于设置元素的块轴上内边距。块轴是指元素所在的主轴方向，例如文本是从上往下排列的，那么块轴方向就是从上往下。

padding-block 属性可以设置元素的上下内边距，它包括以下两个方向的值：

• padding-block-start：表示元素在块轴方向（例如文本从上往下排列，则块轴方向是从上往下）上的顶部内边距；
• padding-block-end：表示元素在块轴方向上的底部内边距。

语法

padding-block 属性的语法如下：

/* 填写一个值，则元素的上下内边距相等 */
padding-block: value;

/* 填写两个值，则第一个值表示元素的上内边距，第二个值表示元素的下内边距 */
padding-block: value1 value2;

/* 分别填写两个值，等同于 padding-block-start 和 padding-block-end 属性 */
padding-block: value-start value-end;

padding-block 属性也可以用 padding-inline 代替，只不过它设置的是内联轴方向（例如文本从左往右排列，则内联轴方向是从左往右）上的内边距。与之对应的是 padding-inline-start 和 padding-inline-end 属性。

值

padding-block 属性的值可以是长度值、百分比、关键字、甚至可以是负值。它们的含义如下：

• 长度值：表示内边距的长度，例如 px、em、rem、cm 等；
• 百分比：表示元素容器的百分比，例如 50%；
• 关键字：包括以下值：auto、inherit、initial、unset；
• 负值：如果设置为负值，表示元素的内边距将变成负值，它可能导致元素内容溢出或元素重叠。

示例

下面是几个 padding-block 属性的示例：

.example1 {
  padding-block: 20px;
  /* 元素的上下内边距都是 20px */
}

.example2 {
  padding-block: 20px 30px;
  /* 元素的上内边距是 20px，下内边距是 30px */
}

.example3 {
  padding-block: 10% 3em;
  /* 元素的上内边距是容器高度的 10%，下内边距是 3em */
}

.example4 {
  padding-block: auto;
  /* 元素的上下内边距自动计算，根据元素的属性计算 */
}

.example5 {
  padding-block: -10px;
  /* 元素的上下内边距都变成了负值，可以导致元素内容溢出或元素重叠 */
}

浏览器兼容性

padding-block 属性的兼容性如下：

• IE：不支持；
• Firefox：支持；
• Chrome：支持；
• Safari：支持；
• Opera：支持；
• iOS Safari：支持；
• Android Browser：部分支持；
• Chrome for Android：支持。