Свойство CSS `tab-size`

Базовая поддержка Широко доступно

Эта возможность хорошо зарекомендовала себя и работает на многих устройствах и во многих версиях браузеров. Она доступна во всех браузерах с августа 2021 года.

Свойство tab-size CSS используется для настройки ширины символов табуляции (U+0009).

Попробуйте

tab-size: 10px;

tab-size: 16px;

tab-size: 24px;

tab-size: 4;

<section id="default-example">
  <pre id="example-element">&#9;123</pre>
</section>

#example-element {
  border: 1px solid;
}

Синтаксис

/* <number> values */
tab-size: 4;
tab-size: 0;

/* <length> values */
tab-size: 10px;
tab-size: 2em;

/* Global values */
tab-size: inherit;
tab-size: initial;
tab-size: revert;
tab-size: revert-layer;
tab-size: unset;

Значения

<number>: Число, кратное ширине символа пробела (U+0020), которое используется в качестве ширины табуляции. Должно быть неотрицательным. Ширина продвижения — это расстояние, на которое перемещается курсор или печатающая головка перед выводом следующего символа.
<length>: Ширина табуляции. Должна быть неотрицательной.

Формальное определение

Исходное значение	8
Применяется к	блочным контейнерам
Наследуется	да
Вычисленное значение	указанное целое число или абсолютная длина
Тип анимации	a <a href="/en-US/docs/Web/CSS/Reference/Values/length#interpolation" title="Значения CSS-типа данных <length> интерполируются как вещественные числа с плавающей точкой.">длина</a>

Формальный синтаксис

tab-size = 
  <integer> |
  <length>

<integer> = 
  <number-token>

Примеры

Увеличение по количеству символов

pre {
  tab-size: 4; /* Set tab size to 4 characters wide */
}

Сворачивание табуляции

pre {
  tab-size: 0; /* Remove indentation */
}

Размер табуляции по умолчанию и пользовательские размеры

В этом примере сравнивается размер табуляции по умолчанию с пользовательским размером. Обратите внимание, что white-space задано значение pre, чтобы символы табуляции не сворачивались.

HTML

<p>no tab</p>
<p>&#0009;default tab size of 8 characters wide</p>
<p class="custom-number">&#0009;custom tab size of 3 characters wide</p>
<p>&nbsp;&nbsp;&nbsp;3 spaces, equivalent to the custom tab size</p>
<p class="custom-length">&#0009;custom tab size of 50px wide</p>

CSS

body {
  border: 1px solid red;
  margin: 1rem;
}

p {
  white-space: pre;
}

.custom-number {
  tab-size: 3;
}

.custom-length {
  tab-size: 50px;
}

Результат

Спецификации

Спецификация
CSS Text Module Level 3 # tab-size-property

Совместимость с браузерами

	Компьютеры					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android	WebView на iOS
`tab-size`	21 Это свойство пока нельзя анимировать.	79 Это свойство пока нельзя анимировать.	91 4 До Firefox 53 это свойство нельзя было анимировать.	15 10.5–15	7	25 Это свойство пока нельзя анимировать.	91 4 До Firefox для Android 53 это свойство нельзя было анимировать.	14 11–14	7	1.5 Это свойство пока нельзя анимировать.	4.4	7
`length`	42	79	53	29	13.1	42	53	29	13.4	4.0	56	13.4

См. также

white-space

© 2005–2025 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/tab-size