html文本框不对齐,【CSS】input text和div不对齐

这里的input相比div明显要下来一点

1、为什么会出现这种情况？

2、应该怎么解决？(input和div的高度都是35px，我想让他们对齐)

回答：

添加vertical-align: top;

回答：

1.input是一个行内替换元素，行内元素其默认的对其方式为baseline

2.div是一个块级别元素,默认的display属性值为block

3.设置div的display属性值为inline-block,那么这个元素将以行内元素的方式显示，将和其左右兄弟行内元素节点或display:inline-block的块级元素显示在一行中

4.display:inline-block的块级元素的baseline的位置为div元素的底部外边距

5.input元素的baseline为其中文字的baseline而不是整个input元素的baseline,和display:inline-block的div元素以baseline的方式在垂直方向上对齐

下面的截图能说明以上的问题:

想让他们对齐

方法1:

方法2:

回答：

多谢分享，学习了