Каскадные таблицы стилей
CSS советы & приемы

(Эта страничка использует каскадные таблицы стилей CSS)

Данный документ является переводом статьи "Web Style Sheets CSS tips & tricks".
Оригинальная версия документа существует только на сайте W3C https://www.w3.org/Style/Examples/007/indent.html
Данный перевод НЕ является официальным документом W3C.
Все Авторские Права Принадлежат W3C.
Данный документ может содержать ошибки перевода и опечатки.

Автор: Евгений Скрипец (все переводы автора: en, ru, uk )
Локальная версия: https://www.indeep76.com/Style/Example007/indent.html

Абзац с красной строки

Eiffel tower

Уменьшенная модель Эйфелевой башни в парке Mini-France

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

Прием в том, чтобы выделять лишь тот абзац, который следует за другим абзацем. Первый абзац не нужно выделять, равно как и абзац, который следует за диаграммой, заголовком, или еще чем-то, что уже само по себе является отступом от текста. Правило на самом деле очень простое:

p {
  margin-bottom: 0 }
p + p {
  text-indent: 1.5em;
  margin-top: 0 }

Выделять отступом первую линию только того абзаца, который следует за другим абзацем. Это правило так же убирает пустоту между абзацами. Но на практике, вы заметите, что вам все же необходимы исключения.

На этой страничке, к примеру, есть элементы P, которые используются как подпись к картинке (смотри пример выше). Мы отцентрировали этот элемент и поэтому у него нет отступа. Делает это простое правило 'p.caption {text-indent: 0}'. В этом примере, Вы можете увидеть, как действует это правило.

Теперь мы можем использовать различное количество пробелом между абзацами для обозначения важных разрывов в тексте. Давайте определим три разных класса: stb (маленький тематический разрыв в тексте), mtb (средний) и ltb (большой). Мы дадим этому абзацу класс stb, чтобы вы смогли увидеть эффект.

p.stb { text-indent: 0; margin-top: 0.83em }
p.mtb { text-indent: 0; margin-top: 2.17em }
p.ltb { text-indent: 0; margin-top: 3.08em }

CSS Valid CSS!Valid HTML 4.0!