input text和div不对齐

Question

<div>
    <input type="text" style="border:1px solid #d1d1d1;display:inline-block"/>
    <div style="width:35px;height:35px;background:black;display:inline-block"></div>
</div>

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

1、为什么会出现这种情况？
2、应该怎么解决？（input和div的高度都是35px，我想让他们对齐）

Answer 1

<div style="width:35px;height:35px;background:black;display:inline-block;vertical-align: top;"></div>

添加vertical-align: top;

Answer 2

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的方式在垂直方向上对齐

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

<div style="background-color: red;">
    <input type="text" style="border: 30px solid #d1d1d1;display:inline-block;">
    <div style="width:35px;height:35px;background:black;display:inline-block;margin:10px;"></div>
</div>

想让他们对齐

方法1:

<div style="background-color: red;">
    <input type="text" style="border: 30px solid #d1d1d1;display:inline-block;vertical-align:middle;">
    <div style="width:35px;height:35px;background:black;display:inline-block;margin:10px;vertical-align:middle;"></div>
</div>

方法2:

<div style="background-color: red;    display: flex;justify-content: flex-start;align-items: center;">
    <input type="text" style="border: 30px solid #d1d1d1;">
    <div style="width:35px;height:35px;background:black;"></div>
</div>

Answer 3

多谢分享，学习了