The jQuery outerHeight () method is used to GET/SET the inner width for the matched element. This will includes the top and bottom padding and border are always included in the .outerHeight() calculation. If the include Margin argument is set to true, the margin (top and bottom) is also included.

  • GET Outer height: It will return the outerHeight for the selected/matched element
  • SET Outer height: It will set the outerHeight for the selected/matched element


  • $(selector).outerHeight()
  • $(selector).outerHeight( includeMargin  )
  • $(selector).outerHeight(value)
  • $(selector).outerHeight(value,function(Integer index, Number Width))
includeMargin It specify the Boolean value to include the element’s margin in the calculation.

  • False:It specifies noot to include the margin. It is a default value.
  • True:It specifies to Include the margin.
Value  It specify the number of pixels or a number along with an optional unit.
function(Integer index,height A function returning the outer height to set. Get the index position of the element in the set and the old outer height as parameter



Here, height of the box is 50. So height() method will return the same as height mentioned as property but outerWidth() method will add the left(10px) , right(10px) padding and border 10(5+5) and return 80 as its outer height.