Question

Why the height of the div in the following code is 101 rather than 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

Because the TEXTAREA element is inline-level by default. This means that there is additional vertical space between the baseline and the descender:

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

To get rid of that vertical space, set the TEXTAREA element to be display:block.

Live demo: http://jsfiddle.net/simevidas/7bJSp/21/