<cite> высоты линии не будет отображаться ниже 1em (100%) от размера шрифта в <blockqoute>

Question

Я работаю с уже существующей темой и имеет следующий HTML:

<blockquote> 
    <p>BLOCKQUOTE TEXT</p> 

    <footer> 
    <cite>CITED AUTHOR</cite> 
    </footer> 
</blockquote> 

Соответствующий КСС следующим образом:

blockquote { 
    font-size: 22px; 
    font-size: 2.2rem; 
    line-height: 1.8182; 
} 

blockquote cite { 
    font-size: 19px; 
    font-size: 1.9rem; 
    line-height: 1.6842; 
} 

сайт действительно использует сброс CSS, который оставляет HTML (корень) размер шрифта в 10px. Поэтому 1rem = 10px. Рассчитанный CSS будет выглядеть следующим образом:

blockquote { 
    font-size: 22px; 
    line-height: 40.0004005432129px; 
} 

blockquote cite { 
    font-size: 19px; 
    line-height: 31.9997997283936px; 
} 

Моя проблема заключается в том, что замена значения высоту строки для процитировать в приведенном выше CSS отражает только если высота линии имеет значение большее, чем текущая высота строки. Например, если бы я писал:

blockquote cite { 
    font-size: 19px; 
    line-height: 1.2; 
} 

Визуальный выход все еще выглядит так, как будто линия-высота составляет 1,6842 (или 31.9px). Изменение высоты строки в самом блочном кадре отражает, как и должно быть без проблем.

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

Answer 1

Просьба добавить display:inline-block для элемента cite.

blockquote { 
 
    font-size: 22px; 
 
    font-size: 2.2rem; 
 
    line-height: 1.8182; 
 
} 
 

 
blockquote cite { 
 
    font-size: 19px; 
 
    font-size: 1.9rem; 
 
    line-height: .75; 
 
    background:red; 
 
    display:inline-block; 
 
}

<blockquote> 
 
    <p>BLOCKQUOTE TEXT</p> 
 

 
    <footer> 
 
    <cite>CITED AUTHOR</cite> 
 
    </footer> 
 
</blockquote>