styling text vs styling an button - html

Question

If i style input then the height affects a text input different then a button.
Why is this? And what can be done about it?
(and as a extra, why don't they align?)
<input type="text" value="foobar"/>
<input type="button" value="foobar"/>
css:
body {
background: red;
}
input {
border: 0;
height: 20px;
padding: 10px;
}
http://jsfiddle.net/clankill3r/sxbzav34/

Answer 1

Some of html elements such as input of type button has predefined styles in browsers. Among others, this results into input of type button to have box-sizing: border-box. Enforce this to be box-sizing: content-box, so your css will look like:
body {
background: red;
}
input {
border: 0;
height: 20px;
padding: 10px;
box-sizing: content-box;
}

Answer 2

One solution is to set line-height instead of height:
body {
background: red;
}
input {
border: 0;
line-height: 50px;
padding: 0 10px 0 10px;
height: 50px;
}
<input type="text" value="foobar"/>
<input type="button" value="foobar"/>
Fix: After testing on other browsers discover an issue. You have to use specific padding e.g. padding: 0 10px;(top and bottom have to be 0)

Answer 3

The size differs because the vertical padding is not added to the size of the button, but it is added to the size of the textbox. You can use height and line-height to set the height and vertical position of the text.
The alignment is off because they have different vertical alignment by default. If you specify a vertical alignment they will align themselves equally.
input {
vertical-align: bottom;
border: 0;
height: 40px;
line-height: 40px;
padding: 0 10px;
}
Demo: http://jsfiddle.net/Guffa/kx7wzufr/

Answer 4

Because of default styling of browsers. Give them different classes and style them.

Answer 5

You can assign two different classes to your text input field and the input button and then style them accordingly, please check this: DEMO.
HTML:
<input class="text" type="text" value="foobar" />
<input class="button" type="button" value="foobar" />
CSS:
body {
background: red;
}
.text {
border: 0;
height: 20px;
padding: 10px;
}
.button {
border: 0px;
padding: 12px 12px 13px 12px;
}

Answer 6

Each browser gives inputs special styling. If you take a look at Chrome developer tools and scroll down a little bit you'll see something along the lines of below. You have to overwrite those styles by adding a class or using input[type="button"]:
input[type="button"], input[type="submit"], input[type="reset"], input[type="file"]::-webkit-file-upload-button, button {
align-items: flex-start;
text-align: center;
cursor: default;
color: buttontext;
padding: 2px 6px 3px;
border: 2px outset buttonface;
border-image-source: initial;
border-image-slice: initial;
border-image-width: initial;
border-image-outset: initial;
border-image-repeat: initial;
background-color: buttonface;
box-sizing: border-box;
}