css属性line-height详解

100 阅读1分钟

image.png

图中:上一行的底线和下一行的顶线之间的距离就是行距,而同一行顶线和底线之间的距离是font-size的大小,行距的一半是半行距,半行距、font-size、line-height之间的关系看图片的右下角就一目了然了~

line-height 的赋值方式:

该属性可继承

  • 带单位:px 是固定值,而 em 会参考父元素 font-size 值计算自身的行高
  • 纯数字:会把比例传递给后代。例如,父级行高为 1.5,子元素字体为 20px,则子元素行高为 1.5 * 20 = 30px
  • 百分比:将计算后的值传递给后代