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.