Урок 7 із 104
7%
← Назад

Розмір табуляції в CSS

Вивчаємо властивість tab-size, яка дозволяє змінювати ширину символу табуляції під час відображення тексту.

Розмір табуляції в CSS

Властивість tab-size визначає, скільки пробілів буде займати символ табуляції (Tab) під час відображення тексту. Вона працює лише там, де символи табуляції не замінюються браузером, наприклад у тегу pre або при використанні white-space: pre.

Синтаксис


pre {
  tab-size: 4;
}

Число означає кількість пробілів, яку займає один символ табуляції.

Приклад

У цьому прикладі код відображається зі збереженням переносів і табуляції.


<pre>
function hello() {
	console.log("Hello");
	console.log("World");
}
</pre>

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

pre.tab2 {
  tab-size: 2;
}

pre.tab4 {
  tab-size: 4;
}

pre.tab8 {
  tab-size: 8;
}
❗ Важливо:

Властивість tab-size працює тільки із символами табуляції. Якщо у тексті використані звичайні пробіли, вона не матиме жодного ефекту.

Практичні завдання

📌 Завдання:
  1. №1. Виведіть на екран програмний код зі збереженням переносів і табуляції.
  2. №2. Зробіть так, щоб один символ табуляції дорівнював чотирьом пробілам.
  3. №3. Змініть попередній приклад так, щоб табуляція дорівнювала двом пробілам.
💡 Показати підказку

Для роботи tab-size використовуйте тег pre або властивість white-space: pre.

✅ Показати відповідь

/* №1 */

pre {
  white-space: pre;
}

/* №2 */

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

/* №3 */

pre {
  white-space: pre;
  tab-size: 2;
}