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

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

padding-block
属性可以使用一个或两个值指定。 如果给出一个值,则将其用作 padding-block-start
和 padding-block-end
的值。 如果给出两个值,则第一个值用于 padding-block-start
,第二个值用于 padding-block-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-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-start
和 padding-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 | 左侧填充 |
浏览器支持
IE | Edge | Firefox | Chrome | Safari | Opera |
---|---|---|---|---|---|
否 | 87+ | 66+ | 87+ | 14.1 | 73 |
Android Chrome | Android Firefox | Android 浏览器 | iOS Safari | Opera Mobile |
---|---|---|---|---|
是 | 是 | 93+ | 14.7+ | 否 |
更多信息
相关
direction
.element { direction: rtl; }
margin-block
.element { margin-block: 30px 60px; }
margin-inline
.element { margin-inline: 60px auto; }
padding
.element { padding: 35px auto; }
padding-inline
.element { padding-inline: 30px 60px; }
text-orientation
element { text-orientation: mixed; }
writing-mode
.element { writing-mode: vertical-rl; }