我有一个非常简单的设置:
<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/
如您所见，这两个元素并没有完全对齐(偏离 1 像素)。
我知道，我可以通过将 vertical-align 更改为 middle 轻松解决此问题，但我想了解为什么存在此偏移首先。
IMO，这两个元素没有完全垂直对齐没有任何意义，因为它们共享所有 CSS 属性(尤其是 height、line-height、display 和 vertical-align)。
谁能解释一下 1px 偏移量是从哪里来的？
最佳答案
baseline对齐与文本的定位有关，而不是与元素作为一个整体的定位有关。如果我们放大 button和 input元素并在文本下方添加一条直线，您会看到两个元素中的文本实际上在同一位置垂直对齐:
我无法告诉您问题的确切原因是什么，但我所知道的是，如果您减少 line-height至 32px或将其增加到 35px这两个元素相互对齐，同时也使文本保持一致:
我的猜测是，当使用 line-height 时，浏览器方面的计算有所不同。的 34px和一个 font-size的 14px在 button 之间和 input元素就像你的例子一样，就好像我们确实改变了 vertical-align至 middle正如您的问题所暗示的那样，文本不再符合:
关于html - 垂直对齐基线不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32825841/