Почему несколько пробелов в IDE отображаются в браузере как один

Тип вопроса: HTML Вероятность: 10% Категория: Frontend Developer

Ответ

В HTML последовательные пробелы, табуляции и переносы строк автоматически сворачиваются в один пробел. Это поведение определено спецификацией HTML и называется "whitespace collapse".

Чтобы сохранить пробелы:

Используйте тег <pre> для сохранения форматирования
Примените CSS свойство white-space: pre или white-space: pre-wrap
Используйте HTML-сущность   для неразрывных пробелов

Пример:

<div style="white-space: pre">Multiple   spaces</div>
<!-- Отобразит "Multiple   spaces" -->