为什么webKit浏览器会在底部使用额外的填充/边距来呈现以下内容？

Question

这个问题很小但是让我烦恼，为什么webKit浏览器会在底部添加额外的填充/边距来渲染以下内容？是解决这个问题的唯一方法来指定高度吗？

<div style="background-color:#efefef; width:200px;">
  <textarea style="padding:0px; margin:0px;"></textarea>
</div>

渲染：

Answer 1

<div style="background-color:#efefef; width:200px;">
    <textarea style="display:block;">asdf</textarea>
</div>

显然，它与<textarea>作为内联元素有关。差距似乎是基线以下的区域。如果你设置display:block;，它将消除差距。

Answer 2

您是否尝试设置文本框的高度以匹配div？它看起来不像你告诉它的高度所以它可能使用默认高度（基于div）。试试吧，没有保证，但嘿可能。