真正的能理解CSS中的line-height,height与line-height

基本概念

行高与行距从字面的意思是非常容易理解的,但是对布局和样式来说,我们应该更深入的理解各个属性之间的关系,比如line-height与font-size存在什么关系呢,line-height与所属元素的height又有什么联系呢?。好了,带着疑问,我们一同探究。
行高是指文本行基线间的垂直距离。 基线(base line)并不是汉字文字的下端沿,而是英文字母“x”的下端沿。下图中两条红线之间的距离就是行高,上行的底线和下一行顶线之间的距离就是行距,而同一行顶线和底线之间的距离是font-size的大小,行距的一半是半行距。

 从上图我们就可以看出,行距、font-size与line-height之间的关系了吧。接下来进一步来看看这三者关系

 当font-size等于line-height时,行距 = line-height - font-size = 0;而当font-size大于line-height时,则会出现行距为负值,则两行重叠,如下图:

故乡明
原文地址:https://www.cnblogs.com/luweiweicode/p/15339718.html