Css text div内部区域：为什么有额外的1px行？

为什么中的

div

的高度是101而不是100

HTML:

JS:

---

因为默认情况下TEXTAREA元素是内联级别的。这意味着基线和下降器之间有额外的垂直空间：

要去掉垂直空间，请将TEXTAREA元素设置为

display:block

---

现场演示：

这里有一个jsFiddle供您参考：Chrome中的高度为105…然而，Chrome还具有文本区域的“自动调整大小”功能，这可能会让您感到困惑。感谢您的解释！您是否熟悉可以查看所有这些细节的工具？（我没有在Firebug中找到它们）我指的是上面图片中的所有细节，即我想在页面上选择一行，然后查看（可能放大）“基线”、“下降者”和e.t.c.在哪里。我想看到与上面图片类似的图片。@Misha抱歉，我不知道有这样的工具。谢谢！我被一个可怕的垂直滚动条弄糊涂了，这个滚动条出现在一个带有内部的区域，但是通过指定

display:block

，去掉了下行空间，解决了问题：-）

<div id="wrapper">
    <textarea></textarea>
</div>
Div height: <span id="wrapper_height"></span>
<br />
Textarea height: <span id="textarea_height"></span>

#wrapper {
    background: #ccc;
}
textarea {
    border: 0;
    width: 300px;
    height: 100px;
    background: #777;
}

$(function() {
    $('#wrapper_height').html($('div').height());
    $('#textarea_height').html($('textarea').height());
});