Login
网站首页 > 文章中心 > 其它

lineheight对行内块有效吗_lineheight居中

作者:小编 更新时间:2023-07-10 09:57:56 浏览量:433人看过

先来看看MDN里对于 line-height 的定义,来帮大家有个初步的概念认识。

line-height 属性用于设置行所需要的空间,例如文本。对于块级元素,它指定元素中线框的最小高度。在未替换的内联元素中,它指定用于计算线框高度的高度。对于替代行内元素,如 button 或其他 input 元素,line-height 没有影响(原文未提到,对于部分替代元素,line-height 依然可以影响元素的样式布局)。

怎么样,看完MDN的解改知漏释以后明白了吗?还是依旧一头雾水?那么,来看看我对于它的理解吧。

先说一个大家都熟知的现象,我们知道div的高度是由里面文档流元素的内容撑开的。如果一个空div里面打入了一个空格或是文字,则此div就会有一个高度。那么这个高度是什么呢?并不是很直观的 font-size ,而是 line-height 。

要证明这一点很简单,做一个对比即可。

大家可能会发现上面示例中明明font-size和line-height设置了一样的大小,但似乎上下还有间隙,这就是line-height的另一个大坑了,一个小栗子献上。

lineheight对行内块有效吗_lineheight居中-图1

怎么样?爽不爽?字体从边框里面出来了哦。这里就需要搬运一下方方知乎文章里的讲解了。

一个内联元素有两个高度: content-area 高度和 virtual-area (实际区域?)高度

( virtual-area 是我自己发明的单词,它表示对人类有效的高度,你在其他地方是看不到这个单词的);

content-area 的高度是由字体度量定义的(font-size的坑,感兴趣的自己爬);

vitual-area 的高度就是 line-height ,这个高度用于计算 line-box 的高度;

virtual-area 和 content-area 高度的猛和差异叫做 leading 。 leading 的一半会被加到 content-area 顶部,另一半会被加到底部。因此 content-area 总是处于核烂 virtual-area 的中间。

lineheight对行内块有效吗_lineheight居中-图2

计算出来的 line-height (也就是 virtual-area 的高度)可以等于、大于或小于 content-area 。如果 virtual-area 小于 content-area ,那么 leading 就是负的,因此 line-box 看起来就比内容还矮了。

(其实就是说 line-height 高度是以中间线为基准上下均分,而 font-size 是根据其字体基线进行高度分配,当两者数值一致的时候因为分配原则不同自然出现上下边界不一致)

而在实际应用中对这些的解读就很简单直接了—— font-size 的大小不一定是它实际所占空间的大小,它自带 line-height 效果,如果你的 line-height 与 font-size 一致或者接近就会很倒霉...所以尽量在设计的时候留出一点富裕值就好了。

在这里问,你不如试一下。

没有, line-height 只对文本有影响

lineheight对行内块有效吗_lineheight居中

以上就是土嘎嘎小编大虾米为大家整理的lineheight对行内块有效吗_lineheight居中相关主题介绍,如果您觉得小编更新的文章对您有所帮助,不要忘记讲本站分享给您身边的朋友哦!!

版权声明:倡导尊重与保护知识产权。未经许可,任何人不得复制、转载、或以其他方式使用本站《原创》内容,违者将追究其法律责任。本站文章内容,部分图片来源于网络,如有侵权,请联系我们修改或者删除处理。

编辑推荐

热门文章