По умолчанию страницы HTML при отображении пропускают все, что больше одного пробела, и не показывают лишние пробелы, чтобы не занимать больше места. Наиболее распространенный способ компенсировать это поведение — задать внутренний или внешний отступ влево или вправо от элемента как замену пробелам, и это является лучшим решением в большинстве случаев. Но бывают ситуации, в которых хотелось бы сохранить настоящие символы пробела, например, если это отступы перед строками кода. Код CSS предоставляет эту возможность с помощью свойства размера табуляции. Если нужно показать следующий код:

<pre><code>ol.generic-class {
        property: value;
}</code></pre>

Можно сохранить табуляцию перед записью “property: value” с помощью свойства размера табуляции, которое поддерживается всеми браузерами, кроме Internet Explorer и Edge, а для браузера Firefox может быть нужна приставка производителя. Чтобы воспользоваться этим свойством и предоставить обходной путь для браузера Internet Explorer, зададим значения свойства, определяющего поведение пробелов, как pre, которое означает, что пробелы сохраняются в браузере, и зададим размер табуляции, равный 4 пробелам:

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

Что создаст следующий визуальный результат:

Обратите внимание на то, что свойство white-space: pre задано на сайте jsfiddle по умолчанию, так что чтобы увидеть результат без его применения, нужно задать этому свойству другое значение: white-space: nowrap, с которым эта запись будет выглядеть следующим образом:

Также можно использовать содержимое псевдоэлементов :before или :after для создания пробелов вместо того, чтобы сохранять табуляцию. Обычно рекомендуется использовать внешние или внутренние отступы вместо этого, но такой вариант тоже возможен:

code:before {
        content: " ";
        whitespace: pre;
}

Автор урока Dudley Storey

Перевод — Дежурка

Смотрите также:

• Использование разных способов применения стилей CSS
• Использование свойств задания вида подчеркивания ссылок
• Использование наборов изображений в HTML5