inset-inline-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-inline-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 id="default-example"> <div class="example-container" id="example-element"> <div id="abspos"> I am absolutely positioned with inset-inline-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-inline-start: 50px; inline-size: 140px; min-block-size: 80px; } 语法
css
/* 长度值 */ inset-inline-start: 3px; inset-inline-start: 2.4em; /* 包含块的宽度或高度的百分比 */ inset-inline-start: 10%; /* 关键词值 */ inset-inline-start: auto; /* 全局值 */ inset-inline-start: inherit; inset-inline-start: initial; inset-inline-start: revert; inset-inline-start: revert-layer; inset-inline-start: unset; inset-inline-start 和 inset-inline-end 的简写属性为 inset-inline。
取值
inset-inline-start 属性的取值与 left 属性相同。
形式定义
形式语法
inset-inline-start =
auto |
<length-percentage>
<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; position: relative; inset-inline-start: 20px; background-color: #c8c800; } 结果
规范
| Specification |
|---|
| CSS Logical Properties and Values Level 1 # propdef-inset-inline-start |
| CSS Positioned Layout Module Level 3 # propdef-inset-inline-start |
浏览器兼容性
参见
- 定义其他偏移的属性：
inset-block-start、inset-block-end和inset-inline-end - 对应的实体属性：
top、right、bottom和left writing-mode、direction、text-orientation