jQuery CookBook - 6.2 dimensions of an element

fiddle.css

#myDiv {
        border: 1px solid red;
    margin: 10px;
}

fiddle.html

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

fiddle.js

$(document).ready(function() {
    var $myDiv = $('#myDiv');
    var $results = $('#results');


    $('<p>Computed Width: ' + $myDiv.width() + '</p>').appendTo($results);
    $('<p>Computed Height: ' + $myDiv.height() + '</p>').appendTo($results);

    $('<p>Inner Width: ' + $myDiv.innerWidth() + '</p>').appendTo($results);
    $('<p>Inner Height: ' + $myDiv.innerHeight() + '</p>').appendTo($results);

    $('<p>Outer Width: ' + $myDiv.outerWidth() + '</p>').appendTo($results);
    $('<p>Outer Height: ' + $myDiv.outerHeight() + '</p>').appendTo($results);

    $('<p>Document Inner Width: ' + $(document).innerWidth() + '</p>').appendTo($results);
    $('<p>Document Inner Height: ' + $(document).innerHeight() + '</p>').appendTo($results);
    
    $('<p>Document Outer Width: ' + $(window).outerWidth() + '</p>').appendTo($results);
    $('<p>Document Outer Height: ' + $(window).outerHeight() + '</p>').appendTo($results);
    
    $('<p>Body Inner Width: ' + $('body').innerWidth() + '</p>').appendTo($results);
    $('<p>Body Inner Height: ' + $('body').innerHeight() + '</p>').appendTo($results);
    
    $('<p>Body Outer Width: ' + $('body').outerWidth() + '</p>').appendTo($results);
    $('<p>Body Outer Height: ' + $('body').outerHeight() + '</p>').appendTo($results);
    
    
});

http://jsfiddle.net/gh/gist/jquery/edge/1665215/