Создание красных строк в тексте — самый распространённый случай использование этого свойства.

Допускаются отрицательные значения, поэтому можно создавать не только отступы, но и выступы.

  
P
{
  text-indent:1.5em;
  margin:0;
}
      

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

Свойство text-align предназначено только для выравнивания текста внутри блока, для которого задано. Блоки выравниваются по границе родителя заданием значения auto для внешних горизонтальных отступов.

Если задано font-size:1cm, то какое именно расстояние будет равно одному сантиметру? Это высота самой большой буквы? Или расстояние между самым высоким кончиком и самым низким хвостиком в строке?

Исторически понятие кегельной площадки связано с металлическим набором, когда буквы отливались на брусках из сплава свинца, сурьмы и олова. Такие бруски назывались литерами.

Кегельная площадка — это верхняя прямоугольная часть литеры, на которой расположено выпуклое (печатающее) изображение буквы или другого знака (очко).

Высоту кегельной площадки или кегль традиционно считают размером шрифта.

Таким образом, размер шрифта определяется не высотой самого большого символа и не разницей между ушками и хвостиками в строке, а высотой прямоугольника, который отводится под символ.

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

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

При записи текста кегельные площадки примыкают друг к другу и образуют область содержимого строки. Высота области содержимого равна font-size.

К области содержимого сверху и снизу добавляется межстрочный интервал. Получается строчный блок. Высота строчного блока равна значению свойства line-height, то есть высоте строки.

Таким образом, line-height равно font-size плюс межстрочный интервал, поделенный на две части — снизу и сверху области содержимого.

Свойство line-height задаёт высоту строчного блока:

Разница между line-height и font-size равна межстрочному интервалу (который делится на две части: сверху и снизу области содержимого). Другое название межстрочного интервала — интерлиньяж.

В этом абзаце высота строки задана равной размеру шрифта (20 пикселам). Получается, что межстрочный интервал равен нулю.

P
{
  font-size:20px;
  line-height:20px;
}           
           

В этом абзаце высота строки задана в виде числа 1.2 (обычное значение для normal). Число является множителем, на который умножается размер шрифта. В данном случае line-height равно 24 пикселам. Межстрочный интервал получается равным 4 пикселам, и он распределяется сверху и снизу по 2 пиксела.

P
{
  font-size:20px;
  line-height:1.2;
}           
           

В этом абзаце высота строки задана как 80%. Проценты вычисляются от размера шрифта. Получается: line-height равно 16 пикселам. Межстрочный интервал — отрицательный, символы соседних строк слегка наползают друг на друга.

P
{
  font-size:20px;
  line-height:80%;
}           
           

По умолчанию базовые линии всех элементов выравниваются по базовой линии строки, в которой они находятся. В рассмотренном ниже примере по базовой линии выровнены и элемент EM, для которого шрифт увеличен в два раза, и картинка:

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

Если у элемента нет базовой линии (как у картинки), то по базовой линии строки выравнивается его низ.

Масса электрона примерно равна 10-27г, она в 3700 раз меньше массы молекулы водорода, наименьшей из всех молекул.

...10<SPAN>-27</SPAN>г,...           
           

SPAN
{
  vertical-align:super;
  font-size:0.8em;
}           
           

Когда нужно уточнить, в какой системе записано число, к нему приписывают снизу основание системы: 8fd16.

...системы: 8fd<SPAN>16</SPAN>.           
           

SPAN
{
  vertical-align:sub;
  font-size:0.8em;
}           
           

До выравнивания:

До выравнивания базовая линия элемента совпадала с базовой линией строки.

После выравнивания:

После выравнивания базовые линии не совпадают. Низ строчного блока элемента опустился до низа контейнера строки.

Текст и у нас расположены в одной строке.

Для картинки задано выравнивание bottom.

EM  /* для первого слова */
{
  font-size:2em;
  line-height:200%;
}           
IMG /* для картинки */
{
  vertical-align:bottom;
}           
           

До выравнивания:

До выравнивания базовая линия элемента совпадала с базовой линией строки.

После выравнивания:

Выравнивает низ строчного блока элемента по хвостикам основного текста строки. Основной текст — это текст без дополнительной разметки. На картинке слева к основному тексту относится слово “строка”, слово “это” имеет особую разметку и при выравнивании элемента в расчёт не берётся.

Текст и  у нас расположены в одной строке.

Для картинки задано выравнивание text-bottom.

EM  /* для первого слова */
{
  font-size:2em;
  line-height:200%;
}           
IMG /* для картинки */
{
  vertical-align:text-bottom;
}           
           

До выравнивания:

До выравнивания базовая линия элемента совпадала с базовой линией строки.

После выравнивания:

После выравнивания базовые линии не совпадают. Верх строчного блока элемента поднялся до верха контейнера строки.

Текст и у нас расположены в одной строке.

Для картинки задано выравнивание top.

EM  /* для первого слова */
{
  font-size:2em;
  line-height:200%;
}           
IMG /* для картинки */
{
  vertical-align:top;
}           
           

До выравнивания:

До выравнивания базовая линия элемента совпадала с базовой линией строки.

После выравнивания:

Выравнивает верх строчного блока элемента по “макушкам” букв основного текста строки. Основной текст — это текст без дополнительной разметки. На картинке слева к основному тексту относится слово “большой”, слово “это” имеет особую разметку и при выравнивании элемента в расчёт не берётся.

Текст и . Они расположены в одной строке.

Для картинки задано выравнивание text-bottom. Мои браузеры поднимают картинку немного выше, чем того требует стандарт. Похоже, они поднимают её до верха области содержимого основного текста (то есть не до верха самой высокой буквы, а до верха кегельной площадки).

EM  /* для первого слова */
{
  font-size:2em;
  line-height:200%;
}           
IMG /* для картинки */
{
  vertical-align:text-top;
}           
           

До выравнивания:

До выравнивания низ картинки совпадал с базовой линией строки.

После выравнивания:

Браузеры по-разному вычисляют ex, чаще всего 1ex полагается равной 0.5em. Для таких браузеров середина элемента выравнивается по точке, на четверть выше базовой линии строки.

Выравнивает середину строчного блока элемента (середину картинки) по точке, которая лежит выше базовой линии строки на 0.5ex.

Величина ex определяется по отношению к основному тексту строки. На картинке слева к основному тексту относится слово “б/y”, слово “это” имеет особую разметку и в расчёт не берётся.

Текст и б/у расположены в одной строке.

Для картинки задано выравнивание middle.

Центр картинки располагается примерно в середине основного текста строки.

EM  /* для первого слова */
{
  font-size:2em;
  line-height:200%;
}           
IMG /* для картинки */
{
  vertical-align:middle;
}           
           

До выравнивания:

До выравнивания базовая линия элемента совпадала с базовой линией строки.

vertical-align:50%:

Базовая линия элемента поднимается над базовой линией строки на величину x, равную половине h (величина свойства line-height элемента).

vertical-align:-50%:

Базовая линия элемента опускается ниже базовой линии строки на величину x, равную половине h (величина свойства line-height элемента).

Текст и б/у расположены в одной строке.

Для картинки задано выравнивание vertical-align:50%.

EM  /* для первого слова */
{
  font-size:2em;
  line-height:200%;
}           
IMG /* для картинки */
{
  vertical-align:50%;
}           
           

Текст и б/у расположены в одной строке.

Для картинки задано выравнивание vertical-align:-50%.

EM  /* для первого слова */
{
  font-size:2em;
  line-height:200%;
}           
IMG /* для картинки */
{
  vertical-align:-50%;
}           
           

До выравнивания:

До выравнивания базовая линия элемента совпадала с базовой линией строки.

vertical-align:100px:

Элемент смещается вверх на 100 пикселов.

vertical-align:-100px:

Элемент смещается вниз на 100 пикселов.

Текст и б/у расположены в одной строке.

Для картинки задано выравнивание vertical-align:2em.

EM  /* для первого слова */
{
  font-size:2em;
  line-height:200%;
}           
IMG /* для картинки */
{
  vertical-align:2em;
}           
           

Текст и б/у расположены в одной строке.

Для картинки задано выравнивание vertical-align:-2em.

EM  /* для первого слова */
{
  font-size:2em;
  line-height:200%;
}           
IMG /* для картинки */
{
  vertical-align:-2em;
}           
           

Слово — это любая последовательность символов, не содержащая разделителей и ограниченная разделителями с обеих сторон. Разделитель — это пробел, знак табуляции, начало или конец строки.

Значения:

• uppercase — в верхний регистр;
• lowercase — в нижний регистр;
• capitalize — прописной становится первая буква каждого слова;
• none — не оказывает на текст влияния.

Значения:

• underline — подчёркивание;
• overline — надчёркивание;
• line-through — перечёркивание.

HTML-код:

  <P>
Тестирование&nbsp;&#8212; 
это защитная сеть вокруг 
вашей программы, последняя 
и порой единственная 
надежда на серьёзное 
повышение её качества до 
того, как она выйдет в свет.

(<EM>Лу Гринзоу, 
&laquo;Философия 
программирования&raquo;/EM)
            

Значения свойства:

• normal — обычное форматирование текста: конец строки равнозначен пробелу, лишние пробелы игнорируются;
• nowrap — запрещает перенос текста на другие строки (за исключением применения элемента BR);
• pre — текст отображается как в HTML-коде: с дополнительными пробелами и обработкой концов строк (как в элементе PRE, но без смены шрифта на моноширинный).

Согласно правилу слева, первая буква каждого абзаца будет окрашена в красный цвет.

Выражение :first-letter можно комбинировать с любым элементом. Например, запись .lf:first-letter относится к первой букве элемента с классом lf.

Согласно правилу слева, первая строка каждого абзаца будет переведена в верхний регистр.

Выражение :first-line можно комбинировать с любым блоком. Например, запись .fline:first-line относится к первой строке блока с классом fline.