DigitalOcean 为您旅程的每个阶段提供云产品。立即开始使用 价值 200 美元的免费积分!
padding-inline
是一个 CSS 逻辑 简写属性,它将 padding-inline-start
和 padding-inline-end
属性组合到一个声明中,在元素内容的 内联(左右)方向创建空间。
.element {
padding-inline: 30px 60px;
writing-mode: vertical-rl; /* Determines the padding block direction */
}
当我们说 padding-inline
“在元素内容周围创建空间” 时,我们指的是在元素内容和元素边缘之间提供额外空间的空间。

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

padding-inline
属性可以使用一个或两个值指定。如果给出一个值,则将其用作 padding-inline-start
和 padding-inline-end
的值。如果给出两个值,则第一个值用于 padding-inline-start
,第二个值用于 padding-inline-end
。
方向取决于书写模式
padding-block
是一个逻辑属性,这意味着它会适应页面的 writing-mode
。因此,当我们处于默认的水平从上到下的书写模式(writing mode: horizontal-tb
)时,块方向从上到下。但当书写模式更改为垂直书写模式(例如 writing-mode: vertical-rl
)时,元素会旋转,将块方向变成内联方向,填充从左到右(或从右到左,具体取决于确切的书写模式)。
另一种思考方式:padding-block
在默认的水平书写模式下表现得像 padding-top
和 padding-bottom
,但在垂直书写模式下表现得像 padding-left
和 padding-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-start
和 padding-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 | 底部填充 |
浏览器支持
IE | Edge | Firefox | Chrome | Safari | Opera |
---|---|---|---|---|---|
否 | 87+ | 66+ | 87+ | 14.1 | 73 |
Android Chrome | Android Firefox | Android 浏览器 | iOS Safari | Opera Mobile |
---|---|---|---|---|
是 | 是 | 93+ | 14.7+ | 否 |
更多信息
相关
方向
.element { direction: rtl; }
margin-block
.element { margin-block: 30px 60px; }
margin-inline
.element { margin-inline: 60px auto; }
padding
.element { padding: 35px auto; }
padding-block
.element { padding-block: 30px 60px; }
text-orientation
element { text-orientation: mixed; }
writing-mode
.element { writing-mode: vertical-rl; }