inset

CSS 属性 inset 为简写属性，对应于 top、right、bottom 和 left 属性。其与 margin 简写属性具有相同的多值语法。

尝试一下

此属性虽然为 CSS 逻辑属性规范的一部分，但是无论元素的书写模式、行内方向和文本朝向如何，其所定义的都不是逻辑偏移而是实体偏移。

语法

css
/* 长度值 */
inset: 10px; /* 应用于所有边 */
inset: 4px 8px; /* 上下 | 左右 */
inset: 5px 15px 10px; /* 上 | 左右 | 下 */
inset: 2.4em 3em 3em 3em; /* 上 | 右 | 下 | 左 */

/* 包含块的宽度（左或右）或高度（上或下）的百分比 */
inset: 10% 5% 5% 5%;

/* 关键词值 */
inset: auto;

/* 全局值 */
inset: inherit;
inset: initial;
inset: revert;
inset: revert-layer;
inset: unset;

取值

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

形式定义

初始值该简写所对应的每个属性：
适用元素positioned elements
是否是继承属性否
Percentagesrelative to the containing block’s size in the corresponding axis (e.g. width for left or right, height for top or bottom)
计算值该简写所对应的每个属性：
  • top: if specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, auto
  • bottom: if specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, auto
  • left: if specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, auto
  • right: if specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, auto
动画类型a length, percentage or calc();

形式语法

inset = 
  <'top'>{1,4}  

<top> = 
  auto                 |
  <length-percentage>  

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

示例

为元素设置偏移

HTML

html
<div>
  <span class="exampleText">示例文本</span>
</div>

CSS

css
div {
  background-color: yellow;
  width: 150px;
  height: 120px;
  position: relative;
}

.exampleText {
  writing-mode: sideways-rl;
  position: absolute;
  inset: 20px 40px 30px 10px;
  background-color: #c8c800;
}

结果

规范

Specification
CSS Logical Properties and Values Level 1
# propdef-inset

浏览器兼容性

BCD tables only load in the browser

参见