如何练就优秀的项目体验
创意、流程、执行缺一不可
CREATIVITY, PROCESS, PERFORM INDISPENSABLE
深入理解line-height属性
2016-09-11

line-height,顾名思义指一行文字高度,具体是指两行文字基线的距离。


在css中,起高度作用的不是height就是line-height!在一个有文字的div中没有定高度,之前一直以为是字体把div撑开了,后来使用多后才发现其实并不是字体撑开div,而是line-height,因为div的文字都有默认的line-height,可以尝试去把line-height设置为0,这时如果div设置一个边框,div成了一条直线,细心的还会发现这条线是在文字的中线位置。


那么为什么line-height会产生高度呢,在inline  box模型中,其实有个line boxes,它的工作就是包裹每行文字,一行文字一个line boxes,当然如果这行文字还包括图片,span之类的inline属性标签,它就会取其中line-height最高的作为自己的高度。



以上是本人参考这篇文章对line-height的一些更深层的理解

http://www.zhangxinxu.com/wordpress/2009/11/css%E8%A1%8C%E9%AB%98line-height%E7%9A%84%E4%B8%80%E4%BA%9B%E6%B7%B1%E5%85%A5%E7%90%86%E8%A7%A3%E5%8F%8A%E5%BA%94%E7%94%A8/



CONTACT US
  • 服务热线:020-22099360
  • 广州技术总部:广州市天河区天河北路179号尚层国际21层
  • 邮箱:admin@bangju.com
扫一扫加客服微信