Опишите пробелы в HTML и их использование.

Пробелы в HTML, также называемые "whitespace", — это символы, не отображаемые браузером (пробелы, табуляция, символы новой строки). Браузеры обычно схлопывают их в один пробел при рендеринге, за исключением определенных элементов и CSS свойств.

Использование:

1. Улучшение читаемости кода: Разработчики используют пробелы для визуального разделения элементов в исходном коде HTML, делая его более понятным и структурированным. Это не влияет на отображение страницы в браузере.

2. Разделение строчных элементов: Браузеры автоматически вставляют пробел между строчными элементами, размещенными рядом в HTML-коде. Это поведение может быть изменено с помощью CSS.

3. Элементы, сохраняющие пробелы:

   • <pre>: Сохраняет все пробелы и переносы строк, форматируя текст точно так, как он написан в исходном коде.
   • <code>: Как правило, используется внутри <pre> для сохранения форматирования кода.
   • <textarea>: Внутри текстового поля ввода пробелы и переносы строк сохраняются.

4. CSS свойство white-space: Позволяет управлять тем, как браузер обрабатывает пробелы внутри элемента:

   • normal (по умолчанию): Схлопывает пробелы, переносы строк игнорируются (кроме <br>).
   • nowrap: Схлопывает пробелы, но предотвращает переносы строк.
   • pre: Эквивалентно использованию тега <pre>.
   • pre-wrap: Сохраняет пробелы и переносы строк, но также允许自动перенос строк по ширине контейнера.
   • pre-line: Схлопывает пробелы, но сохраняет переносы строк.

Пример схлопывания пробелов:

HTML:

<p>
    Много        пробелов

    и
    переносов
    строк
</p>

Результат в браузере:

Много пробелов и переносов строк

Пример с использованием <pre>:

HTML:

<pre>
    Сохранятся
        все
            пробелы
    и
    переносы
</pre>

Результат в браузере:

    Сохранятся
        все
            пробелы
    и
    переносы

Пример с использованием CSS white-space:

HTML:

<div class="pre-wrap">
    Этот текст будет сохранять
        свои пробелы
            и переносы

    строк,
    а также переноситься по ширине.
</div>

CSS:

.pre-wrap {
    white-space: pre-wrap;
    border: 1px solid black;
    width: 150px;
}