CSS for uniform form input heights

Question

This one always bugs me

CSS

/* reset */
input,button { 
     margin:0;padding:0;border:0;
     font-family: inherit; font-size: inherit;
     line-height:1em; }

/* apply some style */
input,button { padding:.5em; }
input { background-color:#fff; }
button { background-color:#333; color:#fff; }

/* for display example */
body { padding:3em; font-size:2em; }
div { background-color:#ccc; padding:.5em }

Markup

<div>
   <span><input type="text" value=" the input value "/></span>
   <span><button> A button</button></span>
</div>

So, Given enough width and the span enabling the inline display ...

Why are they different heights?

The above code is running here

---

Workarounds have been along the lines of:

1) Specify a height - fine, better if using ems, but really???

2) Wrap the elements ( like in the example, div and span ) and style the wrappers ( effectively giving the inputs/buttons some room to differ across browsers)

---

Hoping I have just missed a piece of css on my travels.

Most search finds on this subject point me to the workarounds

Thanks!

Answer 1

Removing the line-height: 1em from the button fixes it in Chrome. For Firefox, adding this fixes it:

button::-moz-focus-inner { 
    border: 0; 
    padding: 0; 
    margin-top:0px; 
    margin-bottom: 0px; 
}

This jsfiddle works in Chrome and Firefox.

Reference

Answer 2

There is a CSS script called normalize.CSS (would link but on mobile). A more comprehensive version of reset. I would suggest linking to it rather than putting it in each CSS file. Try adding that, I find it gives me consistency.

Link added: http://necolas.github.io/normalize.css/

Answer 3

After receiving two great answers, it was a combination of both

1) From @Aphol regarding removing line-height or setting line-height:normal

2) From @indofraiser Using the normalise, which contains the ::-moz-focus-inner

button::-moz-focus-inner,
input::-moz-focus-inner { border: 0; padding: 0; }

The answer is a combination of the two - which works and feels great, as, after setting line-height:normal, there is still a height difference on firefox ( but it is the closest yet ) and the then the ::-moz-focus-inner mops that up.

Thanks you two - the final combo of both answers is here - http://jsfiddle.net/6xP5j/1/

Thanks again, bye bye to the workarounds! Great.