Свойство CSS `inset`

inset CSS — это сокращённое свойство, соответствующее свойствам top, right, bottom и/или left. Оно использует тот же синтаксис с несколькими значениями, что и сокращённое свойство margin.

Эти свойства отступов, в том числе inset, не влияют на элементы без позиционирования.

Несмотря на то, что это свойство входит в модуль логических свойств и значений CSS, оно не определяет логические смещения. Оно определяет физические смещения независимо от режима письма, направления текста и его ориентации.

Попробуйте

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:

• top
• right
• bottom
• left

Синтаксис

/* <length> values */
inset: 10px; /* value applied to all edges */
inset: 4px 8px; /* top/bottom left/right */
inset: 5px 15px 10px; /* top left/right bottom */
inset: 2.4em 3em 3em 3em; /* top right bottom left */
inset: calc(anchor(50%) + 10px) anchor(self-start) auto auto;
inset: anchor-size(block) calc(anchor(50%) + 10px) auto
  calc(anchor-size(width) / 4);

/* <percentage>s of the width (left/right) or height (top/bottom) of the containing block */
inset: 10% 5% 5% 5%;

/* Keyword value */
inset: auto;

/* Global values */
inset: inherit;
inset: initial;
inset: revert;
inset: revert-layer;
inset: unset;

Значения

Свойство inset принимает те же значения, что и свойство top.

Формальное определение

Формальный синтаксис

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

Примеры

Задание смещений для элемента

HTML

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

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;
}

Результат

Спецификации

Совместимость с браузерами

См. также

• top, right, bottom и left
• inset-block и inset-inline
• position
• модуль позиционированной компоновки CSS
• логические свойства и значения CSS