line-height 引发的思考 🤔

发人深思

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

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

image.png

果不其然，就如同我们预料的那般，显示正常了。

鞭辟入里

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

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

我们先看看 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 元素最终渲染的高度会是以哪个为准呢？

不妨动手试一试：

image.png

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

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

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

1. https://stackoverflow.com/questions/41336177/font-size-vs-line-height-vs-actual-height
2. https://www.w3.org/Style/CSS/#specs