inset

Свойство 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;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Можно указать от одного до четырёх значений через пробел. Значения применяются к четырём сторонам соответственно, по часовой стрелке, начиная с верхнего края. Они могут быть в px, em, rem и %. Если указывать left и right в процентах, то они считаются от ширины элемента, если top и bottom, то от высоты.

Часто бывает, что нужно задать позиционированному элементу 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;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Логическое свойство означает, что позиционирование опирается не на стороны окна браузера, а на направление письма и будет меняться вместе с ним.

Свойство inset входит в спецификацию CSS Logical Properties and Values, но смещение происходит физически и поэтому оно не является логическим свойством.

Но этой особенностью обладают его собратья:

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

На практике логические свойства дают нам удобный способ работы с отступами. Представим, что мы работаем над международным сайтом, в котором интерфейс может переключаться между русским и арабским языками. В них различается направление письма, поэтому при вёрстке мы прописали поведение отступов для каждого элемента:

        
          
          .text {  margin-right: 20px;}.text:dir(rtl) {  margin-right: 0;  margin-left: 20px;}
          .text {
  margin-right: 20px;
}

.text:dir(rtl) {
  margin-right: 0;
  margin-left: 20px;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Такой подход сильно перегрузит код, поэтому лучше использовать логические свойства:

        
          
          .text {  inset-inline: 0 20px;}
          .text {
  inset-inline: 0 20px;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать