垂直对齐基线不起作用

Question

我的设置非常简单：

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

使用display: inline-block将两个元素彼此相邻：

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;
}

此处示例：http://jsfiddle.net/j02ypo0v/

如您所见，这两个元素并未完美对齐（关闭1px）。

我知道，我可以通过将vertical-align更改为middle来轻松解决此问题，但我想了解为什么首先存在此偏移量。
IMO，因为它们共享所有CSS属性（特别是height，line-height，display和vertical-align），所以这两个元素没有完全垂直对齐没有任何意义。

有人能解释一下1px偏移的来源吗？

Answer 1

baseline对齐与文本的定位有关，而不是整个元素的定位。如果我们放大button和input元素并在文本下方添加一条直线，您会看到两个元素中的文本实际上在同一位置垂直对齐：< / p>

我无法告诉您问题的确切原因是什么，但我知道的是，如果您将line-height缩减为32px或将其增加到{{1}这两个元素相互一致，同时保持文本的一致性：

我的猜测是，在使用35px line-height和34px font-size之间时，浏览器方面的计算存在差异您的示例中的14px和button元素就像我们确实将input更改为vertical-align一样，因为您的问题表明文字不再符合要求：

Answer 2

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

MDN谈到行高：

  

在未替换的内联元素上，line-height指定高度   用于计算线框高度。在替换内联元素这样的   作为按钮或其他输入元素，行高无效。

Answer 3

您需要删除以下内容：

• padding：0，因为输入自然会有填充
• 身高：34px，因为你已经使用了行高

在此处查找结果：jsfiddle.net

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

我添加了一个黄色div容器，因此更容易看到。