inset-block

在此页

组成特性
句法
形式定义
形式句法
范例
规范
浏览器兼容性
另请参阅
相关话题

inset-inline CSS property defines the logical start and end offsets of an element in the inline direction, which maps to physical offsets depending on the element's writing mode, directionality, and text orientation. It corresponds to the top and bottom ，或 right and left properties depending on the values defined for writing-mode , direction ，和 text-orientation .

/* <length> values */
inset-inline: 3px 10px;
inset-inline: 2.4em 3em;
inset-inline: 10px; /* value applied to start and end */
/* <percentage>s of the width or height of the containing block */
inset-inline: 10% 5%;
/* Keyword value */
inset-inline: auto;
/* Global values */
inset-inline: inherit;
inset-inline: initial;
inset-inline: unset;

组成特性

此特性是下列 CSS 特性的简写：

句法

值

inset-inline property takes the same values as the left 特性。

形式定义

初始值	`auto`
适用于	positioned elements
继承	no
百分比	logical-height of containing block
计算值	same as box offsets: `top` , `right` , `bottom` , `left` properties except that directions are logical
动画类型	a length , percentage or calc();

形式句法

<'top'>{1,2}

范例

Setting inline start and end offsets

HTML

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

CSS

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

结果

规范

规范	状态	注释
CSS Logical Properties and Values Level 1 The definition of 'inset-inline' in that specification.	编者草案	初始定义

浏览器兼容性

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. 更新 GitHub 上的兼容性数据

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`inset-inline`	Chrome 完整支持 69 Disabled 完整支持 69 Disabled Disabled From version 69: this feature is behind the `enable-experimental-web-platform-features` preference (needs to be set to `enabled` ). To change preferences in Chrome, visit chrome://flags.	Edge 完整支持 79 Disabled 完整支持 79 Disabled Disabled From version 79: this feature is behind the `enable-experimental-web-platform-features` preference (needs to be set to `enabled` ).	Firefox 完整支持 63 完整支持 63 不支持 41 — 63 Alternate Name Alternate Name Uses the non-standard name: `offset-inline` 不支持 38 — 51 Disabled Disabled ). To change preferences in Firefox, visit	IE 不支持 No	Opera 完整支持 56 Disabled 完整支持 56 Disabled Disabled From version 56: this feature is behind the `enable-experimental-web-platform-features` preference (needs to be set to `enabled` ).	Safari 不支持 No	WebView Android 不支持 No	Chrome Android 完整支持 69 Disabled 完整支持 69 Disabled Disabled From version 69: this feature is behind the `enable-experimental-web-platform-features` preference (needs to be set to `enabled` ). To change preferences in Chrome, visit chrome://flags.	Firefox Android 完整支持 63 完整支持 63 不支持 41 — 63 Alternate Name Alternate Name Uses the non-standard name: `offset-inline` 不支持 38 — 51 Disabled Disabled ). To change preferences in Firefox, visit	Opera Android 完整支持 48 Disabled 完整支持 48 Disabled Disabled From version 48: this feature is behind the `enable-experimental-web-platform-features` preference (needs to be set to `enabled` ).	Safari iOS 不支持 No	Samsung Internet Android 不支持 No

图例

完整支持
不支持
用户必须明确启用此特征。
使用非标名称。

另请参阅

The mapped physical properties: top , right , bottom ，和 left
The mapped physical shortcut: inset
The mapped block shortcut: inset-block
writing-mode , direction , text-orientation

元数据

最后修改： Oct 8, 2020

在此页