inset

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since April 2021.

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

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

尝试一下

inset: 1em;

inset: 5% 0;

inset: 2em 50px 20px;

inset: 10px 30% 20px 0;

inset: 0;

<section id="default-example">
  <div class="example-container">
    <div id="example-element">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: 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>  |
  <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>
  <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
CSS Positioned Layout Module Level 3
# propdef-inset

浏览器兼容性

参见