如果结束标记位于其自己的行</textarea>，<textarea>将插入额外的空格

Question

如果我使用此代码：

<h5><strong>Back Order ETA: </strong></h5>
<textarea style="width: 100% " id="id_back_order_eta" class="editable form-control" rows="1">{{ ticket.back_order_eta }}
</textarea>

每当我点击页面上的textarea开始输入时，我都没有输入几个空格。

但是如果我使用这个代码块代替：

<h5><strong>Back Order ETA: </strong></h5><textarea style="width: 100% " id="id_back_order_eta"
                                                    class="editable form-control"
                                                    rows="1">{{ ticket.back_order_eta }}</textarea>

它正常工作，没有插入额外的空格。

据我所知，第一个片段在某种程度上显然是不正确的，因为它会造成额外的空间。但我无法弄清楚为什么，据我所知，所有标签都是相同的。我看不出空间可能来自哪里。任何人都可以帮我理解这里发生了什么吗？

Answer 1

并不是说它不正确，但是它尊重你在开始时给予它的空白区域。

新标记上的标记并不存在于真空中。在开始标记的关闭和结束标记的打开之间有空格字符。

删除它，然后进行设置。

实施例

没有空格：

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

输出

  

我的textarea值

使用空格：

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

输出

     my textarea value        

另一种选择：

您可以使用我有时提倡的这个技巧来移除inline-block元素的空白区域，以消除额外的空格 和 保持可读性：< / p>

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

HTML注释将删除任何无关的空格，而不要求您牺牲标记的整洁。