jQuery has provided two different functions to calculate the height of an element. Sometimes, it creates confusion about when to use which function. Here is a simple explanation for height() and outerHeight() function.
height()
This function will calculate inner height of the element after its been rendered. It will exclude padding, borders and margin of the element and will set/get the inner height only.
outerHeight()
This function will calculate outer height of the element after its been rendered. It will include padding, borders and NOT margin of the element. If you want to include margin as well then call outerHeight(true) function.
Examples
<div style="width: 200px; padding: 10px; border: 5px solid #777777; border-radius: 10px;
margin: 10px; height: 200px;" id="example1">
</div>
<script>
$("#example1").height(); //to get inner height
$("#example1").outerHeight(); //to get outer height excluding margins
$("#example1").outerHeight(true); //to get outer height including margins
</script>