padding-block

Avatar of Joel Olawanle
Joel Olawanle

DigitalOcean 为您旅程的每个阶段提供云产品。 立即开始使用 $200 免费积分!

padding-block 是一个 CSS 逻辑 简写属性,它将 padding-block-startpadding-block-end 属性组合到单个声明中,在元素内容周围的 (顶部和底部)方向创建空间。

.element {
  padding-block: 30px 60px;
  writing-mode: vertical-rl; /* Determines the padding block direction */
}

当我们说 padding-block “在元素内容周围创建空间” 时,我们指的是在元素内容和元素边缘之间提供额外呼吸空间的空间。

Two boxes each with orange dashed lines and a sentence of content. The first box is in a horizontal writing mode and the second is in a vertical mode.
“块”方向在水平书写模式中是自上而下,但在垂直书写模式中会从右到左旋转到“内联”方向。

并且该间距位于任何边距和边框的 内部 。 换句话说,它是构成元素盒子模型的最内层间距。

Showing the Box Model dimensions of an element with values, pulled from DevTools.
在此示例中,元素的计算宽度为 ~250px,但填充(以绿色显示)会增加宽度,就像边框和边距一样。

padding-block 属性可以使用一个或两个值指定。 如果给出一个值,则将其用作 padding-block-startpadding-block-end 的值。 如果给出两个值,则第一个值用于 padding-block-start,第二个值用于 padding-block-end

方向取决于书写模式

padding-block 是一个逻辑属性,这意味着它会根据页面的 writing-mode 进行调整。 因此,当我们处于默认的水平自上而下书写模式(writing mode: horizontal-tb)时,块方向从上到下。 但是,当书写模式更改为垂直书写模式(例如 writing-mode: vertical-rl)时,元素会旋转,将块方向变为内联方向,填充从左到右(或从右到左,具体取决于确切的书写模式)。

换句话说:padding-block 在默认的水平书写模式下表现得像 padding-toppadding-bottom,但在垂直书写模式下表现得像 padding-leftpadding-right

如果未明确声明,则 writing-mode 默认设置为水平自上而下。

语法

padding-block: <'padding-top'>{1,2};

在文档中看到一个属性的语法直接引用另一个 CSS 属性的语法看起来很奇怪,但这确实是它的本质。 它实际上想说的是,该属性接受与 padding-top 相同的值(最多两次),遵循以下语法

padding-top: <length> | <percentage> | auto;
  • 初始值: 0
  • 应用于:所有元素,除了内部表格元素、ruby 基本容器和 ruby 注解容器
  • 继承:
  • 百分比:与相应的物理属性相同
  • 计算值:与相应的 padding-* 属性相同
  • 动画类型:按计算值类型

如果您熟悉 padding 简写属性,那么 padding-block 会感觉非常熟悉。 唯一的区别是它在两个方向而不是四个方向上工作。

/* Length values */
padding-block: 20px 40px;
padding-block: 2rem 4rem;
padding-block: 25% 15%;
padding-block: 20px; /* a single value sets both values */

/* Keyword values */
padding-block: auto;

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

组成属性

我们之前说过 padding-block 是一个简写属性。 这意味着它将多个属性组合到一个声明中,这些包含的属性称为 组成属性

让我们具体看看 padding-block-startpadding-block-end CSS 属性,它们构成了 padding-block 简写。 它们很方便,因为它们允许我们分别在块方向上定义填充。

padding-block-start

padding-block-start 在块方向上向元素的逻辑“起始”边缘添加填充。 因此,如果我们在默认的水平自上而下书写模式下工作,则元素的顶部是起始边缘,底部是结束边缘。

.element {
  padding-block-start: 30px;
  writing-mode: vertical-rl; /* Determines the padding block direction */
}

但是! 如果我们将书写方向更改为垂直从左到右,则起始边缘将旋转 90 度,这使得元素的左侧成为起始边缘。

而且,如果我们将方向更改为垂直从右到左,您可能已经猜到:右侧会成为起始边缘。

书写模式起始边缘
horizontal-tb顶部填充
vertical-lr左侧填充
vertical-rl右侧填充

padding-block-end

padding-block-end 是我们刚刚在 padding-block-start 中看到的所有内容,只是方向相反。 因此,如果水平自上而下书写模式中的“起始”是顶部填充,则“结束”是底部填充。

.element {
  padding-block-end: 30px;
  writing-mode: vertical-rl; /* Determines the padding block direction */
}
书写模式结束边缘
horizontal-tb底部填充
vertical-lr右侧填充
vertical-rl左侧填充

浏览器支持

IEEdgeFirefoxChromeSafariOpera
87+66+87+14.173
Android ChromeAndroid FirefoxAndroid 浏览器iOS SafariOpera Mobile
93+14.7+
来源:caniuse

更多信息