CSS input style mask

Question

I try to style the input field and some buttons sequentially, but it seems like some kind of magic continues. The event, although the input has the same classes as the buttons, is slightly higher. In addition, the placeholder text aligns the entered text differently (one pixel above). Can this be solved with a cross-browser solution?

Edit: As Jan Turo noted, the line height fixed the problem in Webkit. Now, if you check the code in Firefox, you will notice that the element still has a 1px border. How to get rid of this?

thanks PS

Codepen

HTML

<form action=""> <a href=""class="btn">Button</a> <input type="text" class="btn" placeholder="input"/> <button class="btn">Login</button> <a href=""class="btn">Button</a> </form> 

CSS

 .btn, input, button { display: inline-block; vertical-align: middle; line-height: 15px; font-size: 15px; font-family: sans-serif; border: 0; padding: 0; margin: 0; cursor: pointer; cursor: hand; text-decoration: none; color: #f2f2f2; background-color: #1a1a1a; padding: 7px 12px 8px 12px; margin-right: 1px; margin-bottom: 1px; } 

Answer 1

line-height does not reduce input height below font-size plus some pixels see MDN info :

When replacing inline elements such as buttons or another input element, the line height is not affected.

Just remove the line-height and you will get what you want, even without applying the height style. Setting line-height to 130% also works.

Answer 2

I have been trying to solve this for several days, and each solution is not whole and does not work in different browsers.

I find this code to do the job:

 float: left; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; height: 33px; 

I updated Codepen - http://codepen.io/anon/pen/pvqRwE