Picture:
.left { border: 1px solid red; } textarea { border: 1px solid blue; } .parent { border: 1px solid green; }
<div class='parent'> <span class='left'> <span>one</span> <span>two</span> </span> <textarea></textarea> </div>
Why is my textarea higher up than its neighbor?
It's not.
Let me explain.
First, a bit of background:
Your span
and 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.
Note the letters "y", "j", "p" and "g". These letters breach the baseline and are known in typography as " descenders ".
[
Source: Wikipedia.org
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 .
The line upon which most letters "sit" and below which descenders extend.
[
Source: Wikipedia.org
So why, somebody might ask, does the browser provide this space for textarea
, img
, input
and 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 span
and 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: bottom
to the textarea
rule, OR display: block
to the textarea
rule. Adam,
If you add the following to your existing css, you should get your desired results.
.left{
display:inline-block;
vertical-align: text-bottom;
}
textarea{
margin:0px;
vertical-align: text-bottom;
}
You can see a working example at the following url: https://jsfiddle.net/YOOOEE/z8pwpms6/
If you have two span elements, the high will be the same. Spans have display:inline; by default.
<span class="left">
<span>one</span>
<span>two</span>
</span>
<span class="right">
<span>one</span>
<span>two</span>
</span>
All browsers have defaults styles for textareas:
textarea {
-webkit-appearance: textarea;
background-color: white;
border: 1px solid;
border-image-source: initial;
border-image-slice: initial;
border-image-width: initial;
border-image-outset: initial;
border-image-repeat: initial;
-webkit-rtl-ordering: logical;
-webkit-user-select: text;
flex-direction: column;
resize: auto;
cursor: auto;
padding: 2px;
white-space: pre-wrap;
word-wrap: break-word;
}
input, textarea, keygen, select, button {
margin: 0em;
font: 13.3333px Arial;
text-rendering: auto;
color: initial;
letter-spacing: normal;
word-spacing: normal;
text-transform: none;
text-indent: 0px;
text-shadow: none;
display: inline-block;
text-align: start;
}
My solution:
.parent {
border: 1px solid green;
display: flex;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.