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/

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

1 个答案: