我需要根据后端控制的字体大小动态设置行高

Question

 .heading { font-size: 6rem; line-height: 4rem; }

 <div class="heading"> <p> Hero <br> <span style="font-size:20px">Banner</span> <br> Text </p> </div>

这里文本“横幅”和 Hero 之间的差距太大，因为这里的行高是恒定的。 如何通过动态调整行高来管理此问题，以便文本不涉及太多间距。 还建议任何其他最佳方式来实现这一目标

Answer 1

em相对于元素的字体大小（4em 表示当前字体大小的 4 倍）
用那个

 .heading { font-size: 6rem; line-height: 4rem; }.banner { line-height: 4em; }

 <div class="heading"> <p> Hero <br /> <span class="banner" style="font-size: 20px">Banner</span> <br /> Text </p> </div>