View in EnglishAlways switch to English

inset-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 2021年4月.

* Some parts of this feature may have varying levels of support.

CSS 属性inset-block-start 定义了元素的块首偏移，并根据元素的书写模式、行内方向和文本朝向对应至实体偏移。根据writing-mode、direction 和text-orientation 所定义的值，此属性对应于top、right、bottom 或left 属性。

尝试一下

writing-mode: horizontal-tb;

writing-mode: vertical-rl;

writing-mode: horizontal-tb;direction: rtl;

writing-mode: vertical-lr;

<section>  <div>    <div>      I am absolutely positioned with inset-block-start: 50px    </div>    <p>      As much mud in the streets as if the waters had but newly retired from the      face of the earth, and it would not be wonderful to meet a Megalosaurus,      forty feet long or so, waddling like an elephantine lizard up Holborn      Hill.    </p>  </div></section>

#example-element {  border: 0.75em solid;  padding: 0.75em;  position: relative;  width: 100%;  min-height: 200px;  unicode-bidi: bidi-override;}#abspos {  background-color: yellow;  color: black;  border: 3px solid red;  position: absolute;  inset-block-start: 50px;  inline-size: 140px;}

语法

css

/* 长度值 */inset-block-start: 3px;inset-block-start: 2.4em;/* 包含块的宽度或高度的百分比 */inset-block-start: 10%;/* 关键词值 */inset-block-start: auto;/* 全局值 */inset-block-start: inherit;inset-block-start: initial;inset-block-start: revert;inset-block-start: revert-layer;inset-block-start: unset;

取值

inset-block-start 属性的取值与left 属性相同。

形式定义

初始值	`auto`
适用元素	positioned elements
是否是继承属性	否
Percentages	logical-height of containing block
计算值	same as box offsets:`top`,`right`,`bottom`,`left` properties except that directions are logical
动画类型	alength,percentage or calc();

形式语法

inset-block-start =
auto|
<length-percentage>

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

示例

设置块首偏移

HTML

html

<div>  <p>示例文本</p></div>

CSS

css

div {  background-color: yellow;  width: 120px;  height: 120px;}.exampleText {  writing-mode: vertical-lr;  position: relative;  inset-block-start: 20px;  background-color: #c8c800;}