line-height与垂直居中

css中行高到底指的是什么了?

line-height称之为行高,顾名思义是指行的高度,目前的主流说法是指两行文本之间基线之间的垂直距离,line-height实际距离指两个半行间距(上一行文本底线与下一行文本的顶线之间垂直距离的二分之一)加上字体本身高度。

也有人并不赞同上述说法(他认为行高并非指的是两行文本之间基线的距离),对于行高 的解释有自己的一套解释方法,

  • 可以看看这位作者是怎么认为的
    该作者认为line-height即是两个leading(line-height与font-height的高度差的二分之一)加上字体高度(他称之为content area 即内容区的高度),之所以文本默认在行框中显示为居中状态,上下有间隙,是因为浏览器默认给line-height设置有高度,一旦给文本设置有高度,那么相当于在文字上下添加了两个高度相等的leading,这样就出现了浏览器文字的默认效果,即文字在单行文本中居中,而且上下有间隙。

引申一下inline-box模型的概念

line-box模型大致有这么几个概念,line-box(行框),当一行行内元素(inline-element)处在同一行时,这一行会生成一个line-box,当然这个盒子你是看不到的,也无法通过css来控制显现出来,而对于每个行内元素会生成一个inline-box(内联盒/行内框),这个行内框的高度实质上就是line-height,而line-box的高度可以视为是由最高的那个inline-box所撑开的,因此对于一个line-box而言其高度就是其内部inlne-box的最大line-height。

由上述我们得出一个结论:

line-height与垂直居中问题

一些相关的论述,有时间再进行深入的研究

参考文章

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,107评论 1 92
  • 参考文章:深入了解CSS的line-height属性Vertical-Align: 你需要知道的所有事【译】Ver...
    若邪Y阅读 3,560评论 1 6
  • 收听音频,戳链接,旧号itclan已暂停使用,欢迎关注微信itclanCoder公众号可收听更多音频 前言 关于网...
    itclanCoder阅读 8,346评论 3 30
  • 行高和行距 line-height 是用于定于行高的css属性。什么是行高? 从上图可以清楚看到,一行文本对应会有...
    亚历山大猫阅读 1,096评论 0 1
  • 有些东西我们经常用,但是我们却并不了解它的原理,所以一旦换了场景,好多东西就不知道该怎么用了。最近一直很纠结ver...
    朱小维阅读 5,202评论 8 34

友情链接更多精彩内容