Where Is the Extra Space Coming from Around This Textarea

Why is textarea filled with mysterious white spaces?

Look closely at your code. In it, there are already three line breaks, and a ton of white space before </textarea>. Remove those first so that there are no line breaks in between the tags any more. It might already do the trick.

How to remove extra space inside textarea

Its because your php tag is on a newline. It is reading in the whitespace from where <textarea> ends until php tag opens. Put this all on one line to fix.

Extra space under textarea, differs along browsers

Add vertical-align: top to textarea.

The reason for the gap is that textarea is an inline (or inline-block) element, and the gap is the space reserved for descenders in text. I don't know exactly why the gap is different between different browsers.

Where is the extra space coming from around this textarea?

Your textarea width is greater the the container: 100% + 2px of border + 2px left padding + 2px right padding

So used box-sizing: border-box; in textarea.

The box-sizing property allows us to include the padding and border in an element's total width and height.

.container {  height: 200px;  width: 500px;  background: steelblue;}
textarea { resize: none; height: 100%; width: 100%; margin: 0; padding: 2px; /* textarea default padding */ border: 1px solid red; overflow: auto; -webkit-box-shadow: none; -moz-box-shadow: none; border-radius: 0; background: rgba(255, 255, 255, 0.5); box-sizing: border-box;}
textarea:focus,textarea:active { outline: none; padding: 0;}
<div class="container">  <textarea></textarea></div>

Remove white space from Text-Area , Why is it there?

The white space is generated by the way you have formatted your HTML:

<textarea style=width:500px; font-size:14px; height:60px;font-weight:bold; 
name= "name" id="name" >

This creates a space and newline in the textarea. Change your HTML to this:

<textarea style=width:500px; font-size:14px; height:60px;font-weight:bold; 
name= "name" id="name" ></textarea>


I can see that you have named your textarea name, which indicates to me that you might want to use a <input type="text"> instead, since textareas are for multiline text.

Textarea shows extra space while retrieving from database?

You're inserting a lot of white-space with your formatting. Try the following instead:

<textarea name="text" rows="9"><?php 
echo trim( $fetchedData['founder_msg'] ); // trim, following comments

textarea is inserting extra spaces if closing tag is on its own line

It's not that it's incorrect, but it's respecting the white space you're giving it at the outset.

That tag being on a new line doesn't exist in a vacuum. There are white-space characters between the close of the opening tag and the open of the closing tag.

Remove that, and you're set.


Without whitespace:

<textarea class="some-class">{{ my-textarea-value }}</textarea>


my textarea value

With whitespace:

<textarea class="some-class">
{{ my-textarea-value }}


     my textarea value        

Another option:

You can use this trick that I sometimes advocate to remove white-space for inline-block elements to get rid of your extra spaces and preserve readability:

<textarea class="some-class"><!--

The HTML comments will remove any extraneous white-space without requiring you to sacrifice the neatness of your markup.

extra spaces and newline PHP automatically get removed TEXTAREA

This is because new line characters are represented as \r\n, in the sourcecode you'll see new lines. Whitespaces get truncated if one follows another in HTML.

I suggest you to use the <pre> tag, which does not only save the new lines (like php's nl2br()) but also preserves the whitespaces.

Don't forget to strip characters that would allow code injection when printing input from unknown source.

Using <pre>:

<pre class="yourStyleForThisPreFormattedText">
Welcome <?php echo htmlentities($_POST["input"]); ?>

Using special chars ( ) and PHP functions:

Welcome <?php $a = nl2br(str_replace(' ', ' ', htmlentities($_POST["input"])), true);
echo $a; ?>


For HTML4 and HTML5 use nl2br($str, true);, for XHTML4 use nl2br($str); - the difference is in the output: <br> and <br />. See http://php.net/nl2br

Related Topics

Leave a reply