Why textarea higher than text input? - html

Question

Found it, sorry, changed padding and forgot to change it for textarea.
My mistake. Will delete )
I'm trying to make table with text input and textarea input on the same row, but cannot make textarea the same height as the text input.
Could anyone please tell me, why text input and textarea have different height and how to fix that? As you can see, textarea is 2px higher and chrome inspector tells me the same. What's wrong and how to fix that?
(sorry for a large text, site told me that I've got "mostly code" and have to add some details. Have no idea, what else may I add to that code, the problem is obvious)))
Thank you!
div
{
background: #ddd;
}
input#te
{
position: relative;
outline:0;
border: 1px solid #a78;
padding-left: 0.5em;
padding-right: 0.5em;
margin: 0;
background: transparent;
height: 5em;
line-height: 5em;
vertical-align: middle;
}
textarea#ta
{
position: relative;
outline:0;
border: 1px solid #a78;
padding-left: 0.5em;
padding-right: 0.5em;
margin: 0;
background: transparent;
height: 5em;
vertical-align: middle;
resize: none;
}
<table>
<tr>
<td>
<div>
<input type=text id="te" value="input is 2px smaller in chrome">
</div>
</td>
<td>
<div>
<textarea id="ta">textarea is 2px higher in chrome</textarea>
</div>
</td>
</tr>
</table

Answer 1

the textarea has padding top-bottom 2px,
the input only 1px.

Answer 2

change the padding on textarea:
div
{
background: #ddd;
}
input#te
{
position: relative;
outline:0;
border: 1px solid #a78;
padding-left: 0.5em;
padding-right: 0.5em;
margin: 0;
background: transparent;
height: 5em;
line-height: 5em;
vertical-align: middle;
}
textarea#ta
{
position: relative;
outline:0;
border: 1px solid #a78;
padding: 1px 0.5em;
margin: 0;
background: transparent;
height: 5em;
vertical-align: middle;
resize: none;
}
<table>
<tr>
<td>
<div>
<input type=text id="te" value="input is 2px smaller in chrome">
</div>
</td>
<td>
<div>
<textarea id="ta">textarea is 2px higher in chrome</textarea>
</div>
</td>
</tr>
</table

Answer 3

box-sizing: border-box; is what you need to place onto the input and text area. Also works well for select.
By using box-sizing: border-box; it means you dont have to adjust all of your widths, padding and line-height and you can have everything the same
div
{
background: #ddd;
}
input#te
{
position: relative;
outline:0;
border: 1px solid #a78;
padding-left: 0.5em;
padding-right: 0.5em;
margin: 0;
background: transparent;
height: 5em;
line-height: 5em;
vertical-align: middle;
box-sizing: border-box;
}
textarea#ta
{
position: relative;
outline:0;
border: 1px solid #a78;
padding-left: 0.5em;
padding-right: 0.5em;
margin: 0;
background: transparent;
height: 5em;
vertical-align: middle;
resize: none;
box-sizing: border-box;
}
<table>
<tr>
<td>
<div>
<input type=text id="te" value="input is 2px smaller in chrome">
</div>
</td>
<td>
<div>
<textarea id="ta">textarea is 2px higher in chrome</textarea>
</div>
</td>
</tr>
</table

Answer 4

To fix the problem, add box-sizing: border-box to the input element AND to the textarea element (for the fix to work in Chrome).
div {
background: #ddd;
}
input#te {
position: relative;
outline: 0;
border: 1px solid #a78;
padding-left: 0.5em;
padding-right: 0.5em;
margin: 0;
background: transparent;
height: 5em;
line-height: 5em;
vertical-align: middle;
box-sizing: border-box;
}
textarea#ta {
position: relative;
outline: 0;
border: 1px solid #a78;
padding-left: 0.5em;
padding-right: 0.5em;
margin: 0;
background: transparent;
height: 5em;
vertical-align: middle;
resize: none;
box-sizing: border-box;
}
<table>
<tr>
<td>
<div>
<input type=text id="te" value="input is 2px smaller in chrome">
</div>
</td>
<td>
<div>
<textarea id="ta">textarea is 2px higher in chrome</textarea>
</div>
</td>
</tr>
</table>