div内的textarea:为什么还有额外的1px线？

Question

为什么的高度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/