Html 垂直对齐基线不工作

我有一个非常简单的设置：

<button>
    Lorem
</button>
<input type="text" value="Ipsum">

示例如下：

如您所见，这两个元素没有完全对齐（关闭1px）

我知道，通过将

vertical align

更改为

middle

，我可以很容易地解决这个问题，但我想了解为什么首先会出现这种偏移。
在我看来，这两个元素没有完全垂直对齐是毫无意义的，因为它们共享所有CSS属性（尤其是

高度

，

行高度

，

显示

和

垂直对齐

）

---

有人能解释一下1px偏移量是从哪里来的吗？

这是因为一个按钮被替换为内联元素

MDN表示关于线高度：

在未替换的内联图元上，线条高度指定 用于计算线框高度。在替换的内联元素上，例如 作为按钮或其他输入元素，行高度没有影响

---

基线对齐与文本的定位有关，而不是整个元素的定位。如果我们放大

按钮

和

输入

元素，并在文本下方添加一条直线，您将看到两个元素中的文本实际上在同一位置垂直对齐：

我不能告诉您问题的确切原因是什么，但我知道的是，如果您将

行高降低到
32px
或将其增加到
35px
，这两个元素将彼此对齐，同时保持文本对齐：


我的猜测是，当使用
按钮
和
输入
元素之间的
行高
为
34px
和
字体大小
为
14px
时，浏览器端的计算会有所不同，如果我们确实将
垂直对齐
更改为
中间对齐
，因为您的问题表明文本不再对齐：

您需要删除以下内容：


填充：0，因为输入自然会有填充
高度：34px，因为您已经使用了线高度

请在此处查找结果：

我添加了一个黄色的div容器，以便更容易查看。
可能的重复您是否注意到，如果将行高度增加或减少一个像素，错误就会消失？
button, input{
    height: 34px;
    line-height: 34px;
    display: inline-block;
    box-sizing: border-box;
    vertical-align: baseline;
    padding: 0;
    margin: 0;
    border: 1px solid green;
    font-size: 14px;
}

button, input{
    line-height: 34px;
    border: 1px solid green;
    font-size: 14px;
    display: inline-block;
    box-sizing: border-box;
    vertical-align: baseline;
    margin: 0;
}