Why is my textarea higher up than its neighbor?

Question

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>

Codepen

Michael Benjamin · Accepted Answer · 2017-03-19T13:09:04.740

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".

[ enter image description here

^{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.

baseline

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:

Add vertical-align: bottom to the textarea rule, OR
Add display: block to the textarea rule.

OMG best answer i've read yet... However here is a question.. if you have a div.. and the text is "New"... no descenders... but, you can clearly see a difference in space for the descenders... is there a way to sort of "shrink-wrap" the text. By the way this is a div with just text...not an inner span or anything. — carinlynchin, Jul 28 '17 at 20:11
@carinlynchin, try using the `line-height` property... https://stackoverflow.com/q/45112764/3597276 — Michael Benjamin, Jul 28 '17 at 20:13
@Michael_B I tried that but there is still a small difference on the bottom space. — carinlynchin, Jul 31 '17 at 12:37
@Michael_B Here you can see a pic. http://gravityvisuals.com/images/test.png. Notice the spacing is slightly bigger on the bottom — carinlynchin, Jul 31 '17 at 17:40

score 2 · Answer 2 · answered Sep 05 '15 at 16:03

2

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/

answered Sep 05 '15 at 16:03

YOOOEE

151
10

1

1) That works, but the only necessary change is `textarea { vertical-align: text-bottom; }`. The rest is extraneous. In particular, the default margin for the `textarea` is `0px`. 2) I think a complete answer would address the "why", not just the "fix". Ie. what user1843159 is saying in the comments about baseline. – Adam Zerner Sep 05 '15 at 16:30
@AdamZerner it seems to me that the `margin: 0` is needed on Firefox in order to align both borders, but not in Chrome. – Zimmi Sep 05 '15 at 16:57
2

@AdamZerner Every browser has own default styles for elements and these styles are not always identical for the different HTML elements. Like user "Zimmi" said you might need some styles for specific browsers only. That is the reason why it is also recommended to use something like [normalize.css](https://necolas.github.io/normalize.css/) to have the same base-style in most browsers... – Oops D'oh Sep 05 '15 at 17:11

Madalina Taina · Answer 3 · 2015-09-05T17:07:42.693

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;
}

Why is my textarea higher up than its neighbor?

3 Answers3

Linked

Related