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

【问题标题】：Why do webKit browsers render the following with extra padding/margin on the bottom?为什么 webKit 浏览器会在底部使用额外的填充/边距呈现以下内容？
【发布时间】：2010-12-16 12:37:48
【问题描述】：

这个问题很小但是困扰着我，为什么 webKit 浏览器会在底部呈现额外的填充/边距？解决这个问题的唯一方法是指定高度吗？

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

渲染：

【问题讨论】：

这很奇怪，我不知道为什么会这样——但你可以通过浮动父 div 内的文本区域来摆脱它。（您还必须在父 div 上设置 overflow:hidden;）。我真的很想知道一个更好的答案，如果有人有的话。
@Lee：你的解决方案是迄今为止最好的，我尝试了很多方法。
我刚刚想通了...请参阅下面的答案。

标签： html css google-chrome webkit

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

【讨论】：