padding-inline

Avatar of Joel Olawanle
Joel Olawanle

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

padding-inline 是一个 CSS 逻辑 简写属性,它将 padding-inline-startpadding-inline-end 属性组合到一个声明中,在元素内容的 内联(左右)方向创建空间。

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

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

Two boxes each with orange dashed lines and a sentence of content showing padding-inline. 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.
在此示例中,元素的计算高度约为 300px,但填充(以绿色显示)会增加高度,就像边框和边距一样。

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

方向取决于书写模式

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

另一种思考方式:padding-block 在默认的水平书写模式下表现得像 padding-toppadding-bottom,但在垂直书写模式下表现得像 padding-leftpadding-right

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

语法

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

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

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

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

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

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

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

组成属性

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

让我们具体看一下 padding-inline-startpadding-inline-end CSS 属性,它们构成了 padding-block 简写。它们很方便,因为它们允许我们在内联方向上定义填充,一次一个侧面。

padding-inline-start

padding-inline-start 在内联方向上向元素的逻辑“起始”边缘添加填充。因此,如果我们使用的是默认的水平从上到下的书写模式,那么元素的左侧是起始,而元素的右侧是结束(剧透警告)。

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

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

这在垂直从右到左的书写模式中也适用,如上面的示例所示。

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

padding-inline-end

padding-inline-end 是我们刚才看到的 padding-inline-start 的所有内容,只是方向相反。因此,如果水平从上到下的书写模式中的“起始”是元素的左侧,那么“结束”是右侧。

垂直从左到右和垂直从右到左都将“结束”放置在元素的底部边缘。

.element {
  padding-inline-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

更多信息