inset

Время чтения: меньше 5 мин

Это незавершённая статья. Вы можете помочь её закончить! Почитайте о том, как контрибьютить в Доку.

Кратко

Секция статьи "Кратко"

Свойство inset заменяет собой сразу четыре свойства: top, right, bottom и left. Позволяет указать смещение позиционированного элемента сразу со всех четырёх сторон. Это логическое свойство, а значит позиционирование будет опираться не на стороны окна браузера, а на направление письма и будет меняться вместе с ним.

inset является шорткатом для свойств:

  • inset-block-start
  • inset-block-end
  • inset-inline-start
  • inset-inline-end

Пример

Секция статьи "Пример"
        
          
          div {  position: absolute;  inset: 10px 15px 20px;}
          div {
  position: absolute;
  inset: 10px 15px 20px;
}

        
        
          
        
      

Как пишется

Секция статьи "Как пишется"

Можно указать от одного до четырёх значений через пробел. Значения применяются к четырём сторонам соответственно, по часовой стрелке, начиная с верхнего края.

Очень часто встречается ситуация, когда нужно задать позиционированному элементу 0 в качестве значения для свойств top, right, bottom и left. Можно написать на старый лад:

        
          
          div {  position: absolute;  top: 0;  right: 0;  bottom: 0;  left: 0;}
          div {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

        
        
          
        
      

Свойство inset позволяет сэкономить три строчки кода:

        
          
          div {  position: absolute;  inset: 0;}
          div {
  position: absolute;
  inset: 0;
}