Edit in JSFiddle

Result
JavaScript
HTML
CSS

$(function(){
    $("div").html("innerHeight=" + $("div").innerHeight() + "<br />innerWidth=" + $("div").innerWidth());
 $("div").html( $("div").html() + "<br />Height=" + $("div").height() + "<br />Width=" + $("div").width());
    $("div").html( $("div").html() + "<br />outerHeight=" + $("div").outerHeight() + "<br />outerWidth=" + $("div").outerWidth());
$("div").html( $("div").html() + "<br />outerHeight(true)=" + $("div").outerHeight(true) + "<br />outerWidth(true)=" + $("div").outerWidth(true));
})


<title>demo</title>
<body>
<div style="border:solid 10px red;">box</div>
</body>

div {
    width:300px;
    height:50px;
    margin:50px;
    padding:50px;
    border:solid 50px red;
}