line-height

142 阅读1分钟

line-height的值:

  • 数字 line-height:1.5, 意味着line-height=1.5 * font-size
  • 百分比 长度用的最多的就是px与em,em跟数字一样,都是相对于font-size来计算的。
  • 长度 相信细心的小伙伴已经发现了,数字,em以及百分比都是相对于font-size来计算的,既然这样,为什么还要多此一举设置另外两个属性呢。原因就在于它们的继承方式是不一样的。对于数字,父元素设置了1.5,则子元素也是会继承1.5。但如果父元素设置的是1.5em,假设父元素font-size是20px,则父元素line-height是30px,同时子元素的line-height也是30px,也就是说子元素继承的是父元素计算后的line-height值。因此,这也是为什么上面推荐使用数字而不是em或百分比的原因了。(参考:segmentfault.com/a/119000001…

image.png

image.png

image.png

参考: