css关于lineheight属性

line-height&＃xff1a;
在最近的vue项目中&＃xff0c;经常用到line-height&＃xff0c;理解为行高&＃xff0c;但是没有很深层次的理解&＃xff0c;这里总结一下line-hei以及height。
概念 &＃xff1a;
行高是指文本行基线间的距离&＃xff0c;所谓基线&＃xff0c;是指“英文字母”的下端沿,如图所示

红线之间的距离就是行高&＃xff0c;上行底线和下一行的顶线距离为行距&＃xff0c;同行顶线和地此案距离为font-size大小
当font-size等于line-height时&＃xff0c;行距 &＃61; font-size - line-height &＃61; 0&＃xff1b;而当font-size大于line-height时&＃xff0c;则会出现行距为负值&＃xff0c;则两行重叠
line-height与height关系&＃xff1a;
&＃xff08;1&＃xff09;height &＃61; line-height时

&＃xff08;2&＃xff09;height>line-height时

&＃xff08;3&＃xff09;height
以下为参考链接
css-line-height
深入了解行高属性