line-height 引发的思考

line-height 引发的思考 🤔

发人深思

上一篇文章发过 dat.gui 相关的内容,这一篇,巧的是,又是与 dat.gui 有那么点关联的。

前些天,同事忽然问我一个问题,他说他在代码里面引入了 antd 的 css,却导致 dat.gui 的输入框的高度发生了改变,就下下面这样:
在这里插入图片描述

但是很奇怪的是,为什么用 chrome 的 devtool,却并为发现,针对该 input 元素,对高度有啥改动。
在这里插入图片描述

刚开始,听到这问题的时候,我也很困惑,没有结论,到底是什么导致的。

但是,凭借多年的开发经验,我很快就意识到,这个问题,很可能出现在 margin、padding、line-height 等一类能够影响到盒子布局的 css 属性上面。

于是,在没有准确的方向的情况下,也只能通过一个个排除问题出现的地方。

茅塞顿开

devtool 这个功能还是很好用的,直接按照属性进行分类,列出最终应用的是哪个地方的 css 属性,方便定位:

在这里插入图片描述

由上图可以看出来,我们的 dat.gui 组件的 input 面板并没有被 antd 的 css 属性设定所覆盖掉。

经过一番排查,最终发现问题出现在 line-height 上面:
在这里插入图片描述

它最终应用的是我们 antd 中写的 css 属性,将原本的浏览器默认的 normal 属性覆盖为了 inherit。

那么接下来,我们直接在浏览器的 devtool 测试下,如果我们将 line-height 改回 inherit,会是出现什么样的效果。
在这里插入图片描述
果不其然,就如同我们预料的那般,显示正常了。

鞭辟入里

如果这篇文章到这里结束了,那就是一篇水文了。

作为一枚爱思考的攻城狮,肯定是要深度挖掘下,为什么会出现这种情况。

我们先看看 mdn 关于 line-height 这一属性的解释:

The line-height CSS property sets the height of a line box. It’s commonly used to set the distance between lines of text. On block-level elements, it specifies the minimum height of line boxes within the element. On non-replaced inline elements, it specifies the height that is used to calculate line box height.

简单的解读一下,这个属性,对于块级元素,它指定元素行盒(line boxes)的最小高度。对于非替代的 inline 元素,它用于计算行盒(line box)的高度。

本身我们的 input 元素就属于inline-block 元素,即行内块级元素。

也就是说,在我们不设置高度的情况下,他会是用来计算高度的一个重要指标。

这就解释了,为什么,我们明明没设置高度,只是改了 line-height,却导致了高度发生了变化了。

但是,如果,我们手动给 input 元素设置一个高度呢?那么我们 input 元素最终渲染的高度会是以哪个为准呢?

不妨动手试一试:
在这里插入图片描述

可以看到,我们设置了高度以后,input 的高度自动应用上了我们指定的高度。

因此我们可以得处结论,对于 input 这种行内元素,没有指定 height 的时候,会自动通过 font-size、line-height 来计算,从而得处最终元素的高度。

如果你对相关话题感兴趣,也可以阅读下相关的资料:

  1. https://stackoverflow.com/questions/41336177/font-size-vs-line-height-vs-actual-height
  2. https://stackoverflow.com/questions/8868565/line-height-font-size-relationship
  3. https://www.w3.org/Style/CSS/#specs
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页