padding-block-start

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2021.

CSS 属性 padding-block-start 定义了元素的逻辑块首内边距,并根据元素的书写模式、行内方向和文本朝向对应至实体内边距。

尝试一下

语法

css
/* <length> 值 */
padding-block-start: 10px; /* 绝对长度 */
padding-block-start: 1em; /* 相对于文本尺寸的长度 */

/* <percentage> 值 */
padding-block-start: 5%; /* 相对于包含区块宽度的内边距 */

/* 全局值 */
padding-block-start: inherit;
padding-block-start: initial;
padding-block-start: revert;
padding-block-start: revert-layer;
padding-block-start: unset;

取值

<length>

以固定值指定的内边距尺寸。必须非负。

<percentage>

以百分比指定的内边距尺寸,参照包含区块行向尺寸(即横向语言中的宽度,由 writing-mode 所定义)。必须非负。

描述

虽然规范定义 padding-block-start 属性的取值与 padding-top 属性相同,但是此属性所对应的实体属性取决于 writing-modedirectiontext-orientation 所设置的值。因此这一属性可能对应于 padding-bottompadding-rightpadding-left

与此相关的属性有 padding-block-endpadding-inline-startpadding-inline-end,这些属性定义了元素的其他内边距。

形式定义

初始值0
适用元素all elements, except table-row-group, table-header-group, table-footer-group, table-row, table-column-group and table-column
是否是继承属性
Percentageslogical-width of containing block
计算值<length>
动画类型a length

形式语法

padding-block-start = 
<'padding-top'>

<padding-top> =
<length-percentage [0,∞]>

<length-percentage> =
<length> |
<percentage>

示例

为竖排文本设置块首内边距

HTML

html
<div>
  <p class="exampleText">示例文本</p>
</div>

CSS

css
div {
  background-color: yellow;
  width: 120px;
  height: 120px;
}

.exampleText {
  writing-mode: vertical-lr;
  padding-block-start: 20px;
  background-color: #c8c800;
}

结果

规范

Specification
CSS Logical Properties and Values Level 1
# padding-properties

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
padding-block-start

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

参见