jQuery Width and Height of HTML Element

jQuery provides many functions to extract the dimensions (width and height) of HTML Element. They are

  • width()
  • height()
  • innerWidth()
  • innerHeight()
  • outerWidth()
  • outerHeight()

Consider a HTML Element with width and height, padding, border and margin set. Following picture demonstrate the results of different methods :

jQuery Width and Height - Dimensions

The following table provides the relation between output of different width, height methods and properties like padding, border and margin.

width()Width of HTML Element
height()Height of HTML Element
innerWidth()width() + Left Padding + Right Padding
innerHeight()height() + Top Padding + Bottom Padding
outerWidth()innerWidth() + Left Border Width + Right Border Width
outerHeight()innerHeight() + Top Border Width + Bottom Border Width
outerWidth(true)outerWidth() + Left Margin + Right Margin
outerHeight(true)outerHeight() + Top Margin + Bottom Margin

Example – Programmatically get Width and Height of a paragraph

To programmatically get width and height of HTML element, we use jQuery width and height methods. Following example demonstrates different width and height functions that consider padding, border and/or margin.



In this jQuery Tutorial, we have learnt jQuery Width and Height of HTML Element() with the help of examples.