inset-inline-end

Свойство inset-inline-end определяет смещение в строчном направлении конечного края логического блока. Положение конечного края зависит от режима письма (свойство writing-mode) и направления текста (свойство direction).

В табл. 1 показано положение блока при разных значениях writing-mode и direction.

Табл. 1. Смещение элемента
Код CSS Смещение Соответствует свойству Вид
div {
  position: relative;
  inset-inline-end: 15px;
}
 Влево right
Джеймс
Кук
div {
  position: relative;
  inset-inline-end: 15px;
  direction: rtl;
}
 Вправо left
Джеймс
Кук
div {
  position: relative;
  inset-inline-end: 15px;
  writing-mode: vertical-rl;
}
 Вверх bottom
Джеймс
Кук
div {
  position: relative;
  inset-inline-end: 15px;
  writing-mode: vertical-lr;
}
 Вверх bottom
Джеймс
Кук
div {
  position: relative;
  inset-inline-end: 15px;
  writing-mode: vertical-lr;
  direction: rtl;
}
 Вниз top
Джеймс
Кук

Краткая информация

Значение по умолчанию auto
Наследуется Нет
Применяется Ко всем позиционированным элементам
Анимируется Да

Синтаксис

inset-inline-end: auto | <размер> | <проценты>

Значения

auto
Устанавливает автоматическое значение, которое обычно соответствует исходному положению элемента.
<размер>
Задаёт смещение в единицах CSS (px, em, rem и др.).
<проценты>
Задаёт смещение в процентах от ширины элемента.

Пример

Код примера скопирован в буфер
<!DOCTYPE html>
<html lang="ru">
 <head>
  <meta charset="utf-8">
  <title>inset-inline-end</title>
  <style>
   header {
    background-color: #027140; /* Цвет фона */
    color: #fff; /* Цвет текста */
    padding: 1em; /* Расстояние от текста до края */
    margin-bottom: 1em; /* Расстояние снизу */
    position: relative; /* Относительное позиционирование */
   }
   .logo {
    font-size: 2em; /* Размер текста */
   }
   .search {
    position: absolute; /* Абсолютное позиционирование */
    inset-inline-end: 1em; /* Положение кнопки */
    border: 0; /* Убираем рамку */
    background: none; /* Убираем фон у кнопки */
   }
   :lang(ar) {
    direction: rtl; /* Направление справа налево */
   }
  </style>
 </head>
 <body>
  <header>
   <span class="logo">Starbucks</span>
   <button class="search"><img src="image/search.svg" width="30" height="30" alt=""></button>
  </header>
  <header lang="ar">
   <span class="logo">ستاربكس</span>
   <button class="search"><img src="image/search.svg" width="30" height="30" alt=""></button>
  </header>
 </body>
</html>

Объектная модель

Объект.style.insetInlineEnd

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

Браузеры

87 87 73 14.1 63
87 63 62 14.5
Логические