设置vertical-align: baseline的textarea与input元素位置及对齐问题

这俩控件虽然都用了vertical-align: baseline，但浏览器对它们的基线定义完全不一样：

• 对于单行<input>来说，它的基线就是内部输入文本的基线——也就是你输入字符（比如小写字母"x"）的底部那条线，和普通文本的基线逻辑一致。
• 而<textarea>作为多行输入控件，浏览器默认把它的基线设置在了控件自身的底部边缘，而非内部文本的基线。

当这俩并排时，<input>会用自己的文本基线去对齐<textarea>的控件底部，自然就会出现textarea整体位置偏高的情况——相当于textarea的底沿和input里文字的底部对齐了，视觉上textarea就往上飘了。

你可以做个小测试：给两个控件都加个边框，然后在input里输入一段文字，就能明显看到input里文字的底部刚好对齐textarea的边框底部，这就是baseline对齐的结果。

如果要让它们视觉上对齐，你可以把其中一个的vertical-align改成middle或者top，就能让控件的中心或顶部对齐了。

内容的提问来源于stack exchange，提问作者aryzing