Vertical-align baseline not working

Question

I have a very simple setup:

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

with both elements next to each other using 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;
}

Example here: http://jsfiddle.net/j02ypo0v/

As you can see, the two elements are not perfectly aligned (off 1px).

I know, I could easily solve this by changing vertical-align to middle, but I want to understand why this offset is present in the first place.
IMO, it doesn't make any sense that the two elements are not perfectly vertically aligned since they share all CSS attributes (especially height, line-height, display and vertical-align).

Can anybody explain me where the 1px offset is coming from?

Answer 1

The baseline alignment is to do with the positioning of the text rather than the positioning of the element as a whole. If we zoom in on the button and input elements and add a straight line below the text, you'll see that the text in both elements is in fact vertically aligned at the same position:

I can't tell you what the exact cause of the problem is, but what I do know is that if you reduce the line-height to 32px or increase it to 35px the two elements become in line with each other whilst keeping the text in line as well:

My guess is that there's a difference in calculation on the browser side of things when using a line-height of 34px and a font-size of 14px between a button and input element as in your example, as if we do change the vertical-align to middle as your question suggests the text is no longer in line: