label 和 input 底部对齐问题

问题：

• 如图所示，label的底部外边和和input的底部不对齐；
• 但是可以发现label的底部外边和input里的文本底部对齐。

解决方案：

1、原因分析

• 元素垂直方向上的对齐属性vertical-align默认是以元素的baseline属性为基准的
• .input是一个行内替换元素，行内元素其默认的对其方式为baseline；input元素的baseline为其中文字的baseline而不是整个input元素的baseline。
• label的baseline为label元素的底部外边距。

2、解决方案

• 设置lable和input元素的vertical-align属性即可，使其均为top、middle、bottom等非baseline属性即可