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

inset-block-start

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

Он соответствует 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-start: 3px;
inset-block-start: 2.4em;

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

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

/* Global values */
inset-block-start: inherit;
inset-block-start: initial;
inset-block-start: revert;
inset-block-start: revert-layer;
inset-block-start: 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-lr;
  position: relative;
  inset-block-start: 20px;
  background-color: #c8c800;
}

Ссылки

Комментарии