关于line-height 行高的一些理解和技巧

Posted 2020-08-28

大家都知道，如何设置文字垂直居中，也就是：设置line-height 和 外围盒子的高度height一致；

其实这里有个地方，是多余的，也就是height，设不设置都居中；

 

那么，行高是生产高度的？

 

先上一个小问题：当div没有设置高度的情况下，撑开其高度是里面的文字吗？

答案是否定的，你可以试试，当你设置行高为line-height: 0; 的时候，div的高度还是0；事实证明，撑开div高度与其里面文字的行高有关系；

先理解下，inline box模型，其中有个line boxes，它是看不到摸不着的东西，它的工作是包裹每行文字，它的属性只有高度height，首先如果div没有设置高度，则其高度是里面一个个line boxes的高度累加而成的；(垂直很多行文字)

但是当只有一行的情况下，line boxes会查询里面哪一个的行高比较大，从而取其高度；如：<div> <span style="line-height:20px;">取手下line-height<span style="line-height:40px;">最高</span>的值</span></div>，此时line boxes取的行高是40px，从而div的高度为40px；(水平一行文字)

 

接下来，再补充一个妙用，利用line-height和vertical属性实现多行图片垂直水平居中的

父级包裹层设置，line-height 和 height相等和text-align: center，里面的图片设置vertical-align:middle;这样就可以实现了