Перейти к содержанию

inset-block-end

Свойство inset-block-end определяет смещение конца логического блока элемента, которое сопоставляется с физической вставкой в ​​зависимости от режима записи элемента, направления и ориентации текста.

Он соответствует top, right, bottom или left свойству в зависимости от значений, определенных для writing-mode, direction и text-orientation.

Демо

Логическое позиционирование

Синтаксис

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
/* <length> values */
inset-block-end: 3px;
inset-block-end: 2.4em;

/* <percentage>s of the width or height of the containing block */
inset-block-end: 10%;

/* Keyword value */
inset-block-end: auto;

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

Поддержка браузерами

Примеры

HTML

1
2
3
<div>
  <p class="exampleText">Example text</p>
</div>

CSS

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
div {
  background-color: yellow;
  width: 120px;
  height: 120px;
}

.exampleText {
  writing-mode: vertical-rl;
  position: relative;
  inset-block-end: 20px;
  background-color: #c8c800;
}

Ссылки

Комментарии