Можно ли влиять на размер пробела

«Можно ли влиять на размер пробела» — вопрос из категории CSS, который задают на 10% собеседований Frontend Разработчик. Ниже — развёрнутый ответ с разбором ключевых моментов.

Ответ

В HTML и CSS пробелы между словами по умолчанию сжимаются до одного. Однако можно управлять их размером:

  1. HTML-сущности:

    •   — неразрывный пробел (фиксированный размер)
    •   — пробел шириной в половину em
    •   — пробел шириной в em
  2. CSS-свойства:
    .text {
      word-spacing: 10px; /* между словами */
      letter-spacing: 2px; /* между буквами */
      white-space: pre; /* сохраняет пробелы как есть */
    }
  1. Flex/Gap (для элементов):
    .container {
      display: flex;
      gap: 20px; /* пробелы между flex-элементами */
    }

Пример:

<p>Hello&emsp;World</p> <!-- Широкий пробел -->
<div style="word-spacing: 15px;">Text with spacing</div>