When working in Javascript with element sizes you need to know width and height but the real effective sizes includes padding, margins and borders. So I created a jQuery function that will return an element's dimensions as an object and will detail both horizontal and vertical: borders, padding, margins and complete size. I use this when I write JS scripts to resize Elements based on screen resolution.

Zone unavailable to unregistered users.
Registration is FREE, quick, painless and worth its weight in gold.

Use it like this var es = jQuery('#id').elementSpace(); and the es will continue two elements:

1. es.h - horizontal details
2. es.v - vertical details

Each of the above contains: padding, margin, border and space [padding + margin + border] and width / height and es.h.h contains entire width [space + width] and es.v.v contains the entire height [space + height]. Code is commented and easy to get around.