文本区域无法解释的间距

Question

我刚刚注意到文本区域下方有一些连线间距，它在每个浏览器中都不同。有人可以解释为什么它在那里吗？

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

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

Answer 1

将此样式添加到文本区域

vertical-align: top

Answer 2

添加

vertical-align:bottom

这是因为

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>

Answer 3

HTML 中 textarea 的问题是文本紧靠底部边距对齐。如果您希望以任何其他方式使用它，请阅读 CSS.

中的 vertical-align 属性

您可以使用：

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

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

Answer 4

将 vertical-align: 顶部添加到 textarea。

产生空隙的原因是textarea是行内（或inline-block）元素，空隙是为text中的descenders预留的space

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

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

文本区域无法解释的间距

textarea unexplained spacing

html

css

textarea