Question 260697 in CSS Question posted in
Some basic documentation can be found here.

Css – How is the position of a textarea and input elements calculated?

When placing a vanilla textarea and an input side by side, the textarea appears higher as shown below,

A textarea and input element side by side

Why is that so? How are their vertical alignments calculated?

Inspecting their CSS reveals both have vertical-align: baseline — where is the baseline against which they’re aligned?

Tags:

2

Answers


  1. 0

    Well first of all, there is no <input></input> with a closing tag. That does not exist because nothing can go "inside" of that tag. There is only a self-closing <input /> tag.

    The default values (tested in Firefox) for:

    • <textarea> is vertical-align: text-bottom
    • <input> is vertical-align: baseline

    Here’s how you can find out
    enter image description here

    <textarea></textarea>
<input/>
    Login or Signup to reply.
  2. 0

    A flexbox or a grid will help you get consistent positioning.

    input, textarea {
  font-family: sans-serif;
  font-size: 20px;
}

.p1, .p2 {
  display: flex;
  gap: 2em;
}

.p1 {
  align-items: start;
}

.p2 {
  align-items: center;
}
    <p class="p1">
  <textarea>Lorem ipsum dolor sit amet</textarea>
  <input value="Lorem ipsum">
</p>

<p class="p2">
  <textarea>Lorem ipsum dolor sit amet</textarea>
  <input value="Lorem ipsum">
</p>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search