border: 1px solid red;
border: 1px solid blue;
border: 1px solid green;
Why is my textarea higher up than it's neighbor?
Let me explain.
First, a bit of background:
textarea elements are (by default) inline elements.
Browsers normally provide a little bit of whitespace underneath inline elements for descenders.
To understand descenders...
Look at this line of text. Notice there are no letters that breach the baseline.
Now look at the following sentence:
By just crossing the bridge he probably got away.
The gap you're seeing is not margin or padding, but simply the browser providing room to accommodate these lowercase letters. In short, this is called baseline alignment.
So why, somebody might ask, does the browser provide this space for
inputand other inline elements, that don't need space for descenders?
Because the browser adjusts for the possibility that you may have text before or after one of those elements on the same line.
Now, to your image and code...
On first glance it clearly appears that the
textarea is higher up than the
span element. But if you take a closer look...
...you'll see they are perfectly aligned. Both
textarea are providing space for descenders.
The borders you've added contribute to the appearance of misalignment because the
textarea border wraps a clearly delineated box while excluding descender space, but the
span border wraps the text and the descender space. If you remove the red border the misalignment is less pronounced.
In terms of a solution, here are two options:
vertical-align: bottomto the
display: blockto the