jQuery Dimensions
The jQuery library includes various methods to manipulate DOM element's dimensions like height, width etc. When writing reusable plugins , you often want to set or animate an element's width and height that include its padding, border, or margin. This is especially important in plugins that allow custom styling.

jQuery provides six functions that we can use to get the height and width of an element.
- width()
- height()
- innerWidth()
- innerHeight()
- outerWidth()
- outerHeight()
jQuery width() and height() Methods
The jQuery width() and height() methods get or set the width and the height of the element respectively. This width and height doesn't include padding, border and margin on the element.
The above code will return the width and height of the boxDiv element.
innerWidth() and innerHeight() Methods
The jQuery innerWidth() and innerHeight() methods returns the inner width and the inner height of the element, includes padding, respectively.
The above code will return the Inner width and Inner height of the boxDiv element.
- InnerHeight = height + padding on both side = 100 + 20 + 20 = 140
- InnerWidth = width + padding on both side = 200 + 20 + 20 = 240
outerWidth() and outerHeight() Methods
The jQuery outerWidth() and outerHeight() methods returns the outer width and the outer height of the element respectively. This outer width and height includes padding and border but excludes the margin on the element.
The above code will return the Outer width and Outer height of the boxDiv element.
- OuterHeight = height + padding + border = 100 + 20 + 20 + 2 + 2= 144
- InnerWidth = width + padding + border = 200 + 20 + 20 +2 +2 = 244
outerWidth(true) and outerHeight(true)
The jQuery outerWidth(true) and outerHeight(true) methods returns the outer width and the outer height of the element respectively includes padding, border, and margin.
- OuterHeight(true) = height + padding + border + margin = 100 + 20 + 20 + 2 + 2 + 5 + 5= 154
- InnerWidth(true) = width + padding + border + margin = 200 + 20 + 20 +2 +2 +5 +5 = 254

Width:
Inner Height:
Outer Width:
Outer Width(true)