Set inner/outer width/height with jQuery Dimensions.Etc Plugin

You often want to animate or set an object to be a specific width or height on the page. But if that element has padding, border, or margin, it will probably take up more space than you expect. The jquery.dimensions.etc.js plugin lets you set and animate the outerWidth, outerHeight, innerWidth and innerHeight of DOM elements.

You often want to animate or set an object to be a specific width or
height on the page. But if that element has padding, border, or margin,
it will probably take up more space than you expect. The
jquery.dimensions.etc.js plugin lets you set and animate the outerWidth,
outerHeight, innerWidth and innerHeight of DOM elements.

These helpers adjust the height and width of the element but include the
padding, border, and margin in their calculation. For example, setting
outerHeight(40) on an element with
"padding:5; border: solid 1px black" will have it’s height set to
40 - 2*5 - 2*1 = 28.

Conclusions

We use outerWidth and outerHeight quite often to make an element the
size we want it to appear on the page. It enables us to use and adjust
border and padding on most widgets we create. Before outerWidth and
outerHeight, we had to manually adjust for border and padding. Hopefully
you can avoid our problem by making use of this plugin. Good luck.