css - div : why there is an extra 1px line? 内的文本区域

Question

为什么 following code 中 div 的高度是 101 而不是 100？

HTML:

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

CSS:

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

JS:

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

Answer 1

因为 TEXTAREA 元素默认是行内级别的。这意味着在基线和下降部之间有额外的垂直空间:

http://vidasp.net/media/CSS-vertical-align.gif

要去除垂直空间，请将 TEXTAREA 元素设置为 display:block。

现场演示: http://jsfiddle.net/simevidas/7bJSp/21/