What is difference between width, innerWidth and outerWidth, height, innerHeight and outerHeight in jQuery

Did you see these examples? Looks similar to your question.

Working with widths and heights

jQuery - Dimensions

jQuery: height, width, inner and outer

As mentioned in a comment, the documentation tells you exactly what the differences are. But in summary:

• innerWidth / innerHeight - includes padding but not border
• outerWidth / outerHeight - includes padding, border, and optionally margin
• height / width - element height (no padding, no margin, no border)

• width = get the width,

• innerWidth = get width + padding,

• outerWidth = get width + padding + border and optionally the margin

If you want to test add some padding, margins, borders to your .test classes and try again.

Also read up in the jQuery docs... Everything you need is pretty much there