In my setup, I have a straightforward configuration:
<button>
Lorem
</button>
<input type="text" value="Ipsum">
both positioned side by side with the help of 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;
}
Take a look at the example here: http://jsfiddle.net/j02ypo0v/
https://i.sstatic.net/nbLC4.png
Upon observation, you may notice that there is a slight misalignment between the two elements (off by 1px).
I'm aware that adjusting vertical-align to middle would easily fix this issue, but I am curious why this discrepancy exists in the first place.
In my opinion, it seems odd that the two elements are not perfectly aligned vertically despite sharing identical CSS properties (particularly height, line-height, display, and vertical-align).
Could someone clarify where this 1px offset originates from?