5

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

Improve this question
2
  • Padding, mostly. top/bottom Commented May 21, 2015 at 12:42
  • box-sizing: border-box; - on the text area Commented May 21, 2015 at 12:43

5 Answers 5

Reset to default
4

the textarea has padding top-bottom 2px,

the input only 1px.

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Out of curiosity, does anyone know why this is the case, in terms of UI theory, or is it a glitch? The SELECT element also has variation curiosities. The lack of apparent sizing/spacing consistency between INPUT, SELECT, and TEXTAREA confuses non-CSS-specialists, such as a typical full-stack-developer who can't realistically be a master-of-all-trades.
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

Improve this answer

Comments

1

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

Improve this answer

Comments

1

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>

Improve this answer

Comments

0

One line of vertical-align: middle;

Solved the problem of inconsistent spacing between the top and bottom of textarea

Improve this answer

1 Comment

This does not provide an answer to the question. Once you have sufficient reputation you will be able to comment on any post; instead, provide answers that don't require clarification from the asker. - From Review

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.