PrepBro
← Назад к вопросам

Как поменять размер пробела в тексте?

1.0 Junior🔥 101 комментариев
#HTML и CSS

Комментарии (1)

🐱
claude-haiku-4.5PrepBro AI2 апр. 2026 г.(ред.)

Ответ сгенерирован нейросетью и может содержать ошибки

Управление размером пробела в тексте CSS

В CSS есть несколько способов управлять размером пробелов (промежутков) между словами, буквами и линиями текста. Это важно для типографики и читаемости.

1. word-spacing - пробел между словами

Свойство word-spacing контролирует пространство между словами:

.wide-words {
  word-spacing: 10px;
}

.narrow-words {
  word-spacing: -2px; /* Отрицательное значение сближает слова */
}

.normal-words {
  word-spacing: 0; /* Нормальный пробел */
}

<p class="wide-words">Hello world this is example</p>
<!-- Очень большие пробелы между словами -->

<p class="narrow-words">Hello world this is example</p>
<!-- Пробелы меньше обычного -->

Значения:

  • normal - стандартный пробел (примерно 0.25em)
  • Пиксели, em, rem - конкретное значение пробела
  • Отрицательные значения - сжатие пробелов

2. letter-spacing - пробел между буквами

Леттер-спейсинг (трекинг в типографике) управляет расстоянием между символами:

.tight-letters {
  letter-spacing: -1px;
  /* Буквы очень близко друг к другу */
}

.normal-letters {
  letter-spacing: 0; /* По умолчанию */
}

.wide-letters {
  letter-spacing: 2px;
  /* Буквы разреженные, как в заголовках */
}

.spaced-title {
  letter-spacing: 0.15em; /* Часто используют em для масштабирования */
}

<h1 class="wide-letters">ATTENTION</h1>
<p class="normal-letters">Normal text</p>
<p class="tight-letters">Compact text</p>

3. line-height - расстояние между строками

Лайн-хайт контролирует высоту строки и расстояние между ними:

.single-line {
  line-height: 1; /* Буквы на одной высоте, без зазора */
}

.normal-line {
  line-height: 1.5; /* Обычное расстояние (по умолчанию ~1.2) */
}

.double-line {
  line-height: 2; /* Двойной интервал */
}

.custom-line {
  line-height: 24px; /* Конкретное значение */
}

<p class="single-line">
  Это текст с одинарным интервалом.
  Вторая строка очень близко к первой.
</p>

<p class="normal-line">
  Это текст с нормальным интервалом.
  Вторая строка на удобном расстоянии от первой.
</p>

<p class="double-line">
  Это текст с двойным интервалом.
  Очень много пространства между строками.
</p>

4. white-space - обработка пробелов и переносов

Свойство white-space определяет как обрабатываются пробелы, табуляции и переносы:

.preserve-spaces {
  white-space: pre; /* Сохраняет все пробелы и переносы */
}

.normal-wrap {
  white-space: normal; /* По умолчанию, переносит текст */
}

.no-wrap {
  white-space: nowrap; /* Весь текст в одну строку */
}

.pre-wrap {
  white-space: pre-wrap; /* Сохраняет пробелы + переносит текст */
}

.pre-line {
  white-space: pre-line; /* Сохраняет только переносы строк */
}

<pre class="preserve-spaces">
Вот     здесь
пробелы сохранены
</pre>

<p class="no-wrap">Это очень длинный текст который не будет переноситься на новую строку и выйдет за границы если контейнер узкий</p>

5. Практические примеры

Пример 1: Красивый заголовок

.title {
  font-size: 32px;
  font-weight: bold;
  letter-spacing: 0.1em; /* Разреженные буквы */
  word-spacing: 0.2em;
  line-height: 1.2;
  text-transform: uppercase;
}

<h1 class="title">Welcome to our website</h1>

Пример 2: Легко читаемый текст статьи

.article-text {
  font-size: 16px;
  line-height: 1.6; /* Удобное расстояние между строками */
  letter-spacing: 0.5px; /* Слегка разреженно */
  word-spacing: 0.1em;
  max-width: 650px; /* Ограничиваем ширину для читаемости */
  margin: 0 auto;
  text-align: justify; /* Выравнивание по ширине */
}

<article class="article-text">
  <p>Lorem ipsum dolor sit amet...</p>
</article>

Пример 3: Компактный код/монолог

.code-display {
  font-family: 'Courier New', monospace;
  font-size: 14px;
  letter-spacing: 0; /* Нет разреживания */
  white-space: pre; /* Сохраняет форматирование */
  line-height: 1.4; /* Компактный, но читаемый */
  background: #f5f5f5;
  padding: 10px;
  overflow-x: auto;
}

Пример 4: Плакат/реклама

.banner-text {
  font-size: 48px;
  font-weight: 900;
  letter-spacing: 0.15em; /* Очень разреженные буквы */
  word-spacing: 0.3em; /* Большие пробелы между словами */
  line-height: 1.1; /* Компактные строки */
  text-transform: uppercase;
  color: white;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}

6. Комбинированный пример - контролируем всё

.stylized-paragraph {
  /* Размер и шрифт */
  font-size: 18px;
  font-family: Georgia, serif;
  
  /* Пробелы */
  letter-spacing: 1px;
  word-spacing: 0.15em;
  line-height: 1.8;
  
  /* Обработка пробелов */
  white-space: normal;
  text-align: left;
  
  /* Дополнительно */
  margin: 20px 0;
  color: #333;
}

<p class="stylized-paragraph">
  Это изящный абзац с полным контролем над всеми пробелами и расстояниями.
</p>

7. Рекомендации для разных случаев

Для основного текста статьи:

  • line-height: 1.5-1.7
  • letter-spacing: 0 или 0.5px
  • word-spacing: normal

Для заголовков:

  • line-height: 1.1-1.3
  • letter-spacing: 0.05em-0.1em
  • word-spacing: 0.05em-0.2em

Для маленького текста:

  • line-height: 1.4-1.5
  • letter-spacing: -0.5px до 0

Для кода:

  • line-height: 1.4-1.6
  • letter-spacing: 0
  • white-space: pre или pre-wrap

8. Важные замечания

Отрицательные значения letter-spacing: Можно использовать отрицательные значения для сжатия букв, но нужно быть осторожно - это может повредить читаемость.

Line-height и наследование: Line-height наследуется от родителей, поэтому если вы установили его в body, то он распространится на все элементы:

body {
  line-height: 1.6; /* Применится ко всему тексту */
}

.tight-line {
  line-height: 1.2; /* Переопределяет наследованное значение */
}

Относительные vs абсолютные единицы:

  • em и rem масштабируются вместе с размером шрифта
  • px - фиксированное значение
  • Для буквпорок лучше использовать em или rem для правильного масштабирования

Правильное управление пробелами - это ключ к хорошей типографике и читаемости текста на веб-сайте.