padding-inline-start

padding-inline-start CSS 属性定义了一个元素的逻辑起始边距,根据该元素的书写模式、方向性和文本方向,它映射为一个物理边距。

尝试一下

语法

/* 长度值 */
padding-inline-start: 10px;   /* 绝对长度 */
padding-inline-start: 1em;    /* 相对于文本的大小 */

/* 百分比值 */
padding-inline-start: 5%;     /* 相对于区块容器的宽度边距 */

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

<length>

作为固定值的边距大小,必须为非负值。

<percentage>

作为百分比的边距大小,相对于包含块的内联大小(在 writing-mode 中定义的水平语言中为 width),必须是非负值。

描述

在规范中,padding-inline-start 属性被定义为与 padding-top 属性取值相同。然而,它所映射的物理属性取决于 writing-modedirectiontext-orientation 的值。因此,它可以映射到padding-toppadding-rightpadding-left

它与 padding-block-start (en-US)padding-block-end (en-US)padding-inline-end (en-US) 有关,它们定义了该元素的其他边距。

形式定义

初始值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
计算值as length
Animation typea length

形式语法

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

示例

设置垂直文字的起始内联边距

HTML

<div>
  <p class="exampleText">Example text</p>
</div>

CSS

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

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

结果

规范

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

浏览器兼容性

BCD tables only load in the browser

参见