tab-size: отображение табуляции в примере кода
Tab-size задаёт ширину табуляции при её отображении. Это помогает согласовать вид учебных примеров, если исходный текст действительно содержит символы табуляции.
Назначение
Tab-size задаёт ширину табуляции при её отображении. Это помогает согласовать вид учебных примеров, если исходный текст действительно содержит символы табуляции.
Как это работает
Свойство заметно в pre или другом контексте, сохраняющем пробелы. Числовое значение задаёт размер шага табуляции в ширинах пробела. Оно не заменяет реальные пробелы табами и не форматирует исходник автоматически.
Пример
<style>.tab-example{tab-size:4;overflow:auto;padding:1rem;background:#edf4ef}</style>
<pre class="tab-example"><code>section {
display: grid;
gap: 1rem;
}</code></pre>Что должно получиться
Строки со свойствами имеют отступ по заданному шагу табуляции. Изменение tab-size меняет отображение, но копируемый символ остаётся табуляцией.
Граница применения и частая ошибка
Если в исходнике четыре пробела, изменение tab-size не повлияет на них. При обычном схлопывании пробелов табуляция может не выглядеть как отступ. Не смешивайте разные соглашения форматирования без причины в одном наборе примеров.
Самостоятельная проверка
Сравните значения 2, 4 и 8. Скопируйте код в редактор с показом невидимых символов. Затем замените табы пробелами и объясните, почему свойство перестало менять отступ.
HTML и CSS можно изменить в песочнице ниже. Она изолирована: JavaScript, внешние ресурсы и отправка форм отключены. Проверки печати, загрузки файлов и сетевых ответов выполняйте в отдельном учебном проекте.