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

Это значительно отличается от традиционного понимания интерлиньяжа, которое обычно означает, что интервал «добавляется» только над строкой текста. (Я знаю, что это не на 100% правильно, потому что на самом деле line-height не добавляет пробела, а устанавливает высоту строки; однако таким образом проще описать проблему).

Рассмотрим этот пример разметки:

    

    

    
    

    
Title
    
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
    
Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
    
It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.
    

Если бы высота строки была равна традиционному пониманию интерлиньяжа, то расстояние между

и первым

было бы равно на расстояние между

, потому что это расстояние определяется интерлиньяжем. Тем не менее, это не так.

Хотя расстояние между

s остается неизменным (высота строки p - размер шрифта p = 15–13 = 2pt ), расстояние между

и первый

отличаются: он равен (высота строки p - размер шрифта p) / 2 + (высота строки h1 - размер шрифта h1) / 2 = (15–13) / 2 + (30–21) / 2 = 5,5 пунктов .

Это можно легко заметить невооруженным глазом, если вышеуказанная разметка обрабатывается браузером.

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

У меня 3 вопроса:

1. Правильно ли я понимаю высоту строки, интерлиньяж и их различия?
2. Есть ли способ сохранить вертикальный ритм с помощью CSS (имитируя традиционный интерлиньяж с помощью CSS или нет)?
3. (Дополнительный вопрос) Что послужило причиной того, что высота строки так сильно отличается от интерлиньяжа?

ОБНОВЛЕНИЕ: большое спасибо за ваш вклад! Обратите внимание, что я предложил свое собственное решение и буду очень благодарен за любые комментарии к нему: https://stackoverflow.com/a/8335230/710356