View in EnglishAlways switch to English

inset-inline

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 定义了元素的逻辑行首和行末偏移，并根据元素的书写模式、行内方向和文本朝向对应至实体偏移。根据writing-mode、direction 和text-orientation 所定义的值，此属性对应于top 和bottom，或者right 和left 属性。

尝试一下

inset-inline: 5% 10%;writing-mode: horizontal-tb;

inset-inline: 10px 40px;writing-mode: vertical-rl;

inset-inline: 5% 10%;writing-mode: horizontal-tb;direction: rtl;

<section>  <div>    <div>I am absolutely positioned.</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-container {  border: 0.75em solid #ad1457;  padding: 0.75em;  text-align: left;  position: relative;  width: 100%;  min-height: 200px;}#example-element {  background-color: #07136c;  border: 6px solid #ffa000;  color: white;  position: absolute;  inset: 0;}

属性构成

此属性为下列 CSS 属性的简写属性：

语法

css

/* 长度值 */inset-inline: 3px 10px;inset-inline: 2.4em 3em;inset-inline: 10px; /* 应用于行首和行末 *//* 包含块的宽度或高度的百分比 */inset-inline: 10% 5%;/* 关键词值 */inset-inline: auto;/* 全局值 */inset-inline: inherit;inset-inline: initial;inset-inline: revert;inset-inline: revert-layer;inset-inline: unset;

取值

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

形式定义

初始值	该简写所对应的每个属性： `inset-inline-start`:`auto` `inset-inline-end`:`auto`
适用元素	positioned elements
是否是继承属性	否
Percentages	logical-width of containing block
计算值	该简写所对应的每个属性： `inset-inline-start`: same as box offsets:`top`,`right`,`bottom`,`left` properties except that directions are logical `inset-inline-end`: same as box offsets:`top`,`right`,`bottom`,`left` properties except that directions are logical
动画类型	alength,percentage or calc();

形式语法

inset-inline =
<'top'>{1,2}

<top> =
auto|
<length-percentage>|
<anchor()>|
<anchor-size()>

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

<anchor()> =
anchor(<anchor-name>?&&
<anchor-side> ,<length-percentage>?)

<anchor-size()> =
anchor-size([<anchor-name>||<anchor-size>]? ,<length-percentage>?)

<anchor-name> =
<dashed-ident>

<anchor-side> =
inside|
outside|
top|
left|
right|
bottom|
start|
end|
self-start|
self-end|
<percentage>|
center

<anchor-size> =
width|
height|
block|
inline|
self-block|
self-inline

示例

设置行首和行末偏移

HTML

html

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

CSS

css

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