jQuery outerHeight() Method

Last Updated:

jQuery outerHeight() Method

The jQuery outerHeight() method gets the outer height (including padding, border, and optionally margin) of the FIRST matched element.

outerHeight() without Margin

In the following example, we will exclude the margin from outer height by leaving the boolean value to default (false).

Example

HTML Editor
<!DOCTYPE html> <html lang="en-US"> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <style> div{ border: 2px solid black; height: 100px; width: 100px; padding: 10px; margin: 10px; } </style> </head> <body> <h1>jQuery outerHeight() Method</h1> <div></div> <p>Click on the button to find the outerHeight of div (include padding and border).</p> <button>Click Me</button> <script> $(document).ready(function(){ $("button").click(function(){ alert($("div").outerHeight()); }); }); </script> </body> </html>

Syntax

$(selector).outerHeight(bool);

Parameter Values

Value Type Explanation
bool Optional Specifies whether or not to include the margin.
Possible values are
  • false - Default. Do Not include margin.
  • true - Include margin.

Browser Support

Devicedesktopmobile
Browsergoogle chromesafarifirefoxinternet Exploreredgeoperagoogle chromesafarifirefoxedgeoperaandroid webviewsamsung internet
outerHeight()YesYesYesYesYesYesYesYesYesYesYesYesYes

outerHeight() with Margin

In the following example, we will include the margin from outer height by setting the boolean value to true.

Example

HTML Editor
<!DOCTYPE html> <html lang="en-US"> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <style> div{ border: 2px solid black; height: 100px; width: 100px; padding: 10px; margin: 10px; } </style> </head> <body> <h1>jQuery outerHeight() Method</h1> <div></div> <p>Click on the button to find the outerHeight of div (include padding, margin and border).</p> <button>Click Me</button> <script> $(document).ready(function(){ $("button").click(function(){ alert($("div").outerHeight(true)); }); }); </script> </body> </html>

Share this Page

Meet the Author