CSS: input['submit'] inconsistent heights

Question

So today i was messing around with some inputs. I had 2 inputs; 1 text field, 1 submit button. I set the heights to be identical on them both, but, for some bizarre reason they weren't. I tried resetting padding, max/min height. To no avail. In the end i settled for identical font-size and paddings to achieve equal heights. What is the reasoning behind this, can anyone explain the logic, is this intentional?

JSFiddle for demonstration: http://jsfiddle.net/FecEe/

HTML

<p>See how the heights are set to be the same, but yet, they are displated differently?</p>
<input class="sample1" type="text" name="email" placeholder="john@example.com">
<input class="sample1" type="submit" name="post" value="Enter">

<br><br>

<p>See how the height isn't set explicitly but the inherited height from the text and padding make the height the same?</p>                            
<input class="sample2" type="text" name="email" placeholder="john@example.com">
<input class="sample2" type="submit" name="post" value="Enter">

CSS:

.sample1{
    height: 50px; /* ...? */
    margin-top: 25px;
    margin-right: 5px;
    padding:10px;
    font-size: 2em;
    outline:none;
    border: 1px solid black;
}
.sample2{ 
    margin-top: 25px;
    margin-right: 5px;
    padding:10px;
    font-size: 2em;
    outline:none;
    border: 1px solid black;
}

Answer 1

The default stylesheet in WebKit (and probably other browsers) is to blame:

input[type="button"], input[type="submit"], input[type="reset"], input[type="file"]::-webkit-file-upload-button, button {
    -webkit-align-items: flex-start;
    text-align: center;
    cursor: default;
    color: ButtonText;
    padding: 2px 6px 3px 6px;
    border: 2px outset ButtonFace;
    background-color: ButtonFace;
    box-sizing: border-box
}

See that box-sizing: border-box? That's making your button's height behave intuitively (at least for me): the padding and borders "grow in" from your maximum height of 50px instead of "growing out".

The default box-sizing property of all elements (and therefore your textbox) is box-sizing: content-box, which is computed differently.

To fix it, just make them both use the same box model (I'd go with box-sizing: border-box;). Better yet, save yourself some trouble and do it for all elements:

*, *:before, *:after {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

There's even a polyfill for IE7 and IE6, if you support them.

Answer 2

use box-sizing: content-box; in sample1 class

  .sample1 {
    height: 50px;
    margin-top: 25px;
    margin-right: 5px;
    padding: 10px;
    font-size: 2em;
    outline: none;
    border: 1px solid black;
    box-sizing: content-box;
    }

Answer 3

  .sample1 {
    height: 50px;
    margin-top: 25px;
    margin-right: 5px;
    padding: 10px;
    font-size: 2em;
    outline: none;
    border: 1px solid black;
    box-sizing: border-box;
    }