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?

possible duplicate of [Why is this inline-block element pushed downward?](http://stackoverflow.com/questions/9273016/why-is-this-inline-block-element-pushed-downward) — Kristijan Iliev, Sep 28 '15 at 15:23
Did you notice that if you increase or decrease line height by one pixel the error goes away? — Salman A, Sep 29 '15 at 07:13

score 5 · Accepted Answer · answered Sep 28 '15 at 15:19

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:

score 0 · Answer 2 · answered Sep 28 '15 at 15:15

It's because a button is replaced inline element.

MDN says about line-height:

On non-replaced inline elements, line-height specifies the height that is used to calculate line box height. On replaced inline elements such as buttons or other input element, line-height has no effect.

score 0 · Answer 3 · answered Sep 28 '15 at 15:28

You need to remove the following:

padding: 0, since the input will naturally have padding
height: 34px, since you already use the line-height

Find the results here: 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;
}

I have added a yellow div container so it's easier to see.

Vertical-align baseline not working

3 Answers3