Высота строчных и строчно-блочных элементов

[Bassline]

Есть такой код

 

Инспектор кода в Хроме показывает, что высота span.inline равна 20px, а высота span.inline-block равна 18px, при этом высота родителя p.block равна 18px.

 

1. Почему у span.inline и span.inline-block разная высота?

2. Почему у родителя p.block высота равна 18, а не 20 (или почему у span.inline границы выходят за пределы родителя по вертикали)?

3. Почему в Firefox высота span.inline равна 21px?

[SelenIT]

Высота строки (которая line-height и которая определяет высоту ее блочного контейнера) складвается из высоты кегельных площадок символов (она задается метриками шрифта, обычно бывает дробной типа 1.227, и может по-разному округляться в разных браузерах — вот ответ на п.3) и вертикального межстрочного пробела («leading»). В данном случае «leading» отрицательный, поэтому итоговая высота строки меньше высоты площадок символов. А высота инлайн-элемента определяется только высотой текста, поэтому она и «выпирает» за рамки уменьшенного line-height (ответ на п.2). Инлайн-блок же сам внутри представляет собой блочный контейнер, поэтому его высота ограничена line-height'ом его содержимого, а он наследуется от внешнего родителя (ответ на п.1).

[Bassline]

То есть в данном примере 18 пикселям равен именно кегль шрифта, как и высота строки line-height, тогда как высота площадок превышает высоту кегля и соответственно высоту сроки, поэтому «leading» отрицательный, правильно?

 

Просто меня сбил с толку один момент в книге "Инлайновый контекст форматирования". На странице 22 описывается пример, в котором тексту задается размер (font-size) в 30px и говорится, что высота площадок привышает эти 30px и равна примерно 50px, цитата "Размер шрифта я выставил 30px, а шрифт я даже не стал трогать, и значит, весь текст состоит из одного шрифта, да к тому же простого, не экзотического. Следовательно, можно взять высоту по максимуму из всех площадок, которая может составлять… думаю, не больше 50px(и то вряд ли).".

А на следующей странице 23 (я так понял это тот же пример, только подробнее расписан) уже не площадка равна 50px, a размер текста (font-size) равен 50px, цитата "На рисунке можно увидеть, из чего состоит высота строки: half-leading (75px) +font-size (50px) + half-leading(75px). Это и есть наш line-height." Исходя из этого я подумал, что последние данные более корректны, и решил, что все-таки font-size задает максимальные границы шрифта по высоте, и что отсчет для «leading» начиается имеено отсюда. А раз так, то значит, если font-size = line-height, то «leading» становится нулевым, а не отрицательным. Возможно я туплю, но прочитанное интерпритировал именно так.

[SelenIT]

Да, к сожалению, там в тексте ошибка. Вместо font-size там должно быть «высота текста» (высота кегельных площадок). Приношу извинения за мою оплошность при подготовке публикации и спасибо за внимательность!