textarea原因不明的间距

Question

我刚刚注意到textarea下方的一些有线间距，每个浏览器都有所不同。有人可以解释它为什么存在吗？

＆＃13;

＆＃13;

span,
textarea {
    border: 1px solid black;
    margin: 0;
    padding: 0;
}

＆＃13;

<textarea></textarea>
<span>test</span>

＆＃13;

＆＃13;

＆＃13;

Answer 1

添加

vertical-align:bottom

这是因为

  

HTML规范未指定某些替换元素的基线，如<textarea>，这意味着它们对此关键字的行为可能会从一个浏览器更改为另一个浏览器。

     

^{MDN Reference}

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

<textarea></textarea>
<span>test</span>

Answer 2

将vertical-align:添加到textarea。

差距的原因是textarea是内联（或内联块）元素，而间隙是文本中为descenders保留的空间。

＆＃13;

＆＃13;

span,
textarea {
  border: 1px solid black;
  margin: 0;
  padding: 0;
}
textarea{
  vertical-align:top;
}

＆＃13;

<textarea></textarea>
<span>test</span>

＆＃13;

＆＃13;

＆＃13;

Answer 3

将此样式添加到textarea

vertical-align: top

Answer 4

HTML中textarea的内容是文本在底部边距旁边对齐。如果您希望以其他方式使用它，请阅读CSS中的vertical-align属性。

您可以使用：

span,
textarea {
  border: 1px solid black;
  margin: 0;
  padding: 0;
  vertical-align: middle;
}

<textarea></textarea>
<span>test</span>