PHPFixing
  • Privacy Policy
  • TOS
  • Ask Question
  • Contact Us
  • Home
  • PHP
  • Programming
  • SQL Injection
  • Web3.0

Thursday, November 17, 2022

[FIXED] Why textarea and input text with same font-size, line-height, padding and height are vertically aligned differently?

 November 17, 2022     css, html, input, textarea, vertical-alignment     No comments   

Issue

enter image description here

QUESTION 1:

Why do the following textarea and text input have different vertical text alignment if they both have the same font-size, line-height, height, padding ?

QUESTION 1.1

How can I make the textarea have the same vertical alignment as the input ?

.myTextarea {
  display: block;
  font-family: Arial;
  font-size: 14px;
  line-height: 21px;
  height: 32px;
  padding: 2px 5px;

  resize: none;
}

.myInput {
  display: block;
  font-family: Arial;
  font-size: 14px;
  line-height: 21px;
  height: 32px;
  padding: 2px 5px;
}

.myDiv {
  margin-top: 20px;
  margin-bottom: 5px;
  font-weight: bold;
}
<div>
  <div class="myDiv">Textarea</div>
  <textarea class="myTextarea" rows="1">12345</textarea>
  <div class="myDiv">Input</div>
  <input class="myInput" type="text" value="12345"/>
</div>


Solution

You can remove line height on your input since it has no effect on it.

Beside you should have the same line height as height for your textarea to reproduce the same effect than the input.

.myTextarea {
  display: block;
  font-family: Arial;
  font-size: 14px;
  line-height: 32px;
  height: 32px;
  padding: 2px 5px;

  resize: none;
}

.myInput {
  display: block;
  font-family: Arial;
  font-size: 14px;
  height: 32px;
  padding: 2px 5px;
}

.myDiv {
  margin-top: 20px;
  margin-bottom: 5px;
  font-weight: bold;
}
<div>
  <div class="myDiv">Textarea</div>
  <textarea class="myTextarea" rows="1">12345</textarea>
  <div class="myDiv">Input</div>
  <input class="myInput" type="text" value="12345"/>
</div>



Answered By - gael
Answer Checked By - Terry (PHPFixing Volunteer)
  • Share This:  
  •  Facebook
  •  Twitter
  •  Stumble
  •  Digg
Newer Post Older Post Home

0 Comments:

Post a Comment

Note: Only a member of this blog may post a comment.

Total Pageviews

Featured Post

Why Learn PHP Programming

Why Learn PHP Programming A widely-used open source scripting language PHP is one of the most popular programming languages in the world. It...

Subscribe To

Posts
Atom
Posts
Comments
Atom
Comments

Copyright © PHPFixing