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

添加vertical-align: top;

1.input是一个行内替换元素，行内元素其默认的对其方式为baseline
2.p是一个块级别元素,默认的display属性值为block
3.设置p的display属性值为inline-block,那么这个元素将以行内元素的方式显示，将和其左右兄弟行内元素节点或display:inline-block的块级元素显示在一行中
4.display:inline-block的块级元素的baseline的位置为p元素的底部外边距
5.input元素的baseline为其中文字的baseline而不是整个input元素的baseline,和display:inline-block的p元素以baseline的方式在垂直方向上对齐

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

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

想让他们对齐

方法1:

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

方法2:

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