line-height 引发的思考 🤔
发人深思
上一篇文章发过 dat.gui 相关的内容，这一篇，巧的是，又是与 dat.gui 有那么点关联的。
前些天，同事忽然问我一个问题，他说他在代码里面引入了 antd 的 css，却导致 dat.gui 的输入框的高度发生了改变，就下下面这样：
image.png
果不其然，就如同我们预料的那般，显示正常了。
鞭辟入里
如果这篇文章到这里结束了，那就是一篇水文了。
作为一枚爱思考的攻城狮，肯定是要深度挖掘下，为什么会出现这种情况。
我们先看看 mdn 关于 line-height 这一属性的解释：
The
line-heightCSS 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 来计算，从而得处最终元素的高度。
如果你对相关话题感兴趣，也可以阅读下相关的资料：
