In this article we will learn how to get outer Height of html elements or how to use outerHeight() method in jQuery with example.


The jQuery outerHeight () funtion is used to return the outer height of first matched html element. This method includes padding and border both.

Let’s see, Example of jQuery outerHeight() method:

<!DOCTYPE html>
<html xmlns="">
    <title>Example of jQuery outerHeight method</title>
    <script type="text/javascript" src=""></script>
        $(document).ready(function () {
            $("button").click(function () {
                $('p').text("Outer height of div is: " + $("div").outerHeight());
    <div style="height:100px;width:300px;padding:10px;margin:3px;
     border:1px solid blue;background-color:lightpink;"></div><br>
    <button>Click here to get the outer width of the div</button>  <br />


 Let's check live example

Leave a comment

Make sure you enter the (*) required information where indicated. HTML code is not allowed.

You may also like