首页 > 代码库 > 关于line-height 行高的一些理解和技巧
关于line-height 行高的一些理解和技巧
大家都知道,如何设置文字垂直居中,也就是:设置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;这样就可以实现了
关于line-height 行高的一些理解和技巧
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。