Why Is My Textarea Higher Up Than Its Neighbor

Why is my textarea higher up than its neighbor?

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

[Sample Image

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.

[Sample Image

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

Sample Image

...you'll see they are perfectly aligned. Both span and textarea are providing space for descenders.

Sample Image

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:

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

How to remove few pixels of whitespace underneath textarea?

It's because the textarea element's display is inline-block by default. As a result, its vertical-align property is set to baseline (which is why it isn't aligned as you would expect). The reason there is reserved space at the bottom is for letters such as 'y' or 'j', which hang below adjacent letters/elements.

To resolve this, you can either change the vertical-align property value to something like top, or you could change the display of the textarea to block:

Updated Example

textarea {
vertical-align: top;
}

Updated Example

textarea {
display: block;
}

textarea unexplained spacing

Add

vertical-align:bottom

This is because

The baseline of some replaced elements, like <textarea>, is not specified by the HTML specification, meaning that their behavior with this keyword may change from one browser to the other.

MDN Reference

span,
textarea {
border: 1px solid black;
margin: 0;
padding: 0;
vertical-align: bottom;
}
<textarea></textarea>
<span>test</span>

How to get rid of space below element inside details element

Add vertical-align: top to your log class. Space is reserved in inline elements for descender characters, e.g. y, j, g:

details {  width: calc(100vw - 20px);  box-sizing: border-box;  border: 1px solid black;  padding: 0;}
.log { width: 100% !important; height: 100%; overflow-y: scroll; box-sizing: border-box; border: none; border-bottom: 1px solid red; outline: none; min-height: 50px; display: inline-block; vertical-align: top;}
<details>  <summary>Connection Log</summary>  <div class="log" readonly>[08:33:43]: Connection</div></details>
<details> <summary>Connection Log</summary> <textarea class="log" readonly>[08:33:43]: Connection</textarea></details>

Textarea resize

I´m afraid you´ll have to resort to javascript to set the height of your textarea. You can use the scrollHeight property to determine the total height.

Alternatively you could just use a div and style the div to look like a textarea. The div will grow automatically and as it´s a disabled textarea anyway, you don´t really need it to be a textarea.

Trying to align flex items to bottom, but instead they're aligning to first line of text

you can flex the images or to the end of long text

.liste { 
align-items: flex-end;
}

OR to the center:

align-items: center;

How can I prevent the textarea from stretching beyond his parent DIV element? (google-chrome issue only)

To disable resizing completely:

textarea {
resize: none;
}

To allow only vertical resizing:

textarea {
resize: vertical;
}

To allow only horizontal resizing:

textarea {
resize: horizontal;
}

Or you can limit size:

textarea {
max-width: 100px;
max-height: 100px;
}

To limit size to parents width and/or height:

textarea {
max-width: 100%;
max-height: 100%;
}

preventing Textarea input after pixel width is reached

You mean something like this in my snippet below?

I used add a keydown listener in the textarea when it reaches 920px or more, in this listener I set that only Backspace and Delete keys will be allowed, any other key will be ignored with the return false.

(For tests only I limited to 50px instead of 920)

var ellipsisAdded = falsefunction snippet(){  var metaIn = document.getElementById('metaIn');  var metaOut = document.getElementById('metaOut');  metaOut.value = metaIn.value;
var metaOutPix = document.getElementById('metaOutPix'); metaOutPix.value = metaIn.value;
document.getElementById('metaOutPix').innerHTML = document.getElementById('metaIn').value var span1 = $( "span#metaOutPix" ); $( "#metaCountPixel" ).text(span1.innerWidth() + "px / 50px");
var metaNum = metaIn.value var metaCount = metaNum.length; document.getElementById("metaCount").innerHTML = metaCount + " Char";
if (span1.innerWidth() >= 50){ let txtArea = $("#metaIn") txtArea.on("keydown", (ev) => { console.clear() if (ev.key != "Backspace" && ev.key != "Delete"){ console.log("max Pixels reached!"); if (!ellipsisAdded){ ellipsisAdded = true let currentText = txtArea.val() let newTxt = currentText.substring(0, currentText.length - 1) + "..." txtArea.val(newTxt) } return false } }) }else{ $("#metaIn").off("keydown") ellipsisAdded = false; }}
@import url("https://fonts.googleapis.com/css?family=Raleway");html, body {  font-family: Raleway, sans-serif;  margin: 3px;  max-width: 80em;  overflow-x: hidden; }
h1 { margin-top: 1em; text-align: center; }
.input-wrap { width: 100%; } .input-wrap h3 { font-size: 20px; text-transform: lowercase; background: #254e61; color: #ffffff; padding: 0.5em; margin: 0; line-height: .2em;} .input-wrap textarea { margin: 0 0 10px 0; width: 100%; height: 5em; resize: none; border: solid 2px #254e61; padding: 5px; font-size: 14px; font-family: arial; } .input-wrap #metaIn { height: 8em; }
#preview { width: 100%; border: solid 2px #5badff; margin-top: 1.5em; } #preview h3 { font-size: 22px; padding: 0.5em; background-color: #5badff; color: #ffffff; margin: 0; line-height: .4em; }
.outputs { padding: 4px; }
#metaOut { border: none; width: 100%; resize: none; overflow: hidden; }
#metaOut, #metaOutPix { font-family: arial, sans-serif; color: #545454; line-height: 20px; font-size: 13px;}#metaOut{ max-width: 460px; height: 100px;}
.countspace{ white-space: nowrap; display: none;}
.countdown { color: white; margin-top: -22px; padding-right: 5px; font-size: 18px; }
#metaCount{ text-align: center;}#metaCountPixel{ text-align: right;}


@media (min-width: 750px) { body, html { width: 80%; margin: auto; } }@media (min-width: 1280px) { .inputs { display: grid; margin-top: 30px; grid-gap: 8px; grid-template-areas: ". tworow" ". tworow"; }
.input-wrap:nth-child(3) { grid-area: tworow; } .input-wrap:nth-child(3) #metaIn { height: 192px !important; }
.input-wrap textarea { margin: 0 0 0 0; }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>   <div class="inputs"><div class="input-wrap" id="meta-div">    <h3>Description</h3>    <div class="countdown" id="metaCount">0 Char</div>    <div class="countdown" id="metaCountPixel">0px / 50px</div>    <textarea type="text" name="metaIn" id="metaIn" onkeyup="snippet()" onkeypress="snippet()" maxlength="320" onkeyup="displayTextWidth()"></textarea></div></div>
<div id="preview"> <h3>Snippet Preview</h3> <div class="outputs"> <textarea type="text" name="metaOut" id="metaOut" placeholder="Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos ipsum voluptatem nemo reiciendis asperiores accusamus suscipit aliquid eveniet quo vero." readonly></textarea> <span class="countspace" id="metaOutPix"></span> </div></div>

Styling max-width for text area wrapper overlap the relative element

The max-width constraint need to be applied to the textarea and not the div element