You want to determine the space occupied by an element.

The width and height methods can be applied to any element, and they are useful for determining the computed width or height of an element. However, they fall short if you need to determine the actual real estate that an element is occupying on the screen. In addition to width and height, jQuery provides the following methods for determining more specific dimensions of an element:

innerWidth Returns the width excluding the border and including the padding.

innerHeight Returns the height excluding the border and including the padding.

outerWidth Returns the width including both the border and the padding.

outerHeight Returns the height including the border and including the padding.

HTML:

<div id="results"></div>
<div id="myDiv">Some text.</div>

CSS:

#myDiv {
width:100px;
height:30px;
padding:10px;
border:1px;
}

JQuery:

$(function() {
    var $myDiv=jQuery('#myDiv');
    var $results=jQuery('#results');
    jQuery('<p>Computed width:'+$myDiv.width()+'</p>')
    .appendTo($results); // 100
    jQuery('<p>Computed height:'+$myDiv.height()+'</p>')
    .appendTo($results); // 30
    jQuery('<p>Inner width:'+$myDiv.innerWidth()+'</p>')
    .appendTo($results); // 120
    jQuery('<p>Inner height:'+$myDiv.innerHeight()+'</p>')
    .appendTo($results); // 50
    jQuery('<p>Outer width:'+$myDiv.outerWidth()+'</p>')
    .appendTo($results); // 122
    jQuery('<p>Outer height:'+$myDiv.outerHeight()+'</p>')
    .appendTo($results); // 52
    jQuery('<p>Document outer height:'+jQuery(document).outerHeight()+'</p>')
    .appendTo($results); // NaN
    jQuery('<p>Document inner height:'+jQuery(document).innerHeight()+'</p>')
    .appendTo($results); // NaN
    jQuery('<p>Window outer height:'+jQuery(window).outerHeight()+'</p>')
    .appendTo($results); // NaN
    jQuery('<p>Window inner height:'+jQuery(window).innerHeight()+'</p>')
    .appendTo($results); // NaN
});