tab-size

tab-size меняет длину символа табуляции (таба).

        
          
          pre {  tab-size: 4;}
          pre {
  tab-size: 4;
}

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

Значение 4 задаёт длину таба в 4 пробела.

У свойства tab-size есть два варианта значений:

• Длина в количестве пробелов, по умолчанию — 8.
• Длина в любых единицах измерения длины.

Иногда в коде для отступов используются табы, иногда пробелы. В редакторе кода можно настроить, сколько места занимает один таб. Свойство tab-size — аналог такой настройки для браузера.

Исторически принятое значение 8 символов слишком велико, поэтому часто задают значение 4 или 2.

Самое интересное, что это значение можно менять в зависимости от ширины окна. В примере ниже жёлтый блок с кодом — это фрейм, в котором открыта страница adaptive/code.html.

При изменении ширины фрейма срабатывает медиавыражение, которое меняет ширину таба, а свойство transition позволяет делать это плавно:

        
          
          pre {  tab-size: 1;  transition: tab-size 0.2s;}@media (min-width: 450px) {  pre {    tab-size: 4;  }}
          pre {
  tab-size: 1;
  transition: tab-size 0.2s;
}

@media (min-width: 450px) {
  pre {
    tab-size: 4;
  }
}

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