Внутренняя высота или ширина элемента — это его высота или ширина без учета рамки и полей. Доступ к этой информации обеспечивают методы .innerHeight() и .innerWidth().

 
Если вы хотите получить значения высоты или ширины элемента с учетом размеров окружающей его рамки, используйте методы  .outerHeight()  или .outerWidth(). Чтобы также включить размер полей, используйте методы  .outerHeight(true) или .outerWidth(true).
Добавьте в абзац с классом foo рамку и поля, а затем выведите значения его различных параметров высоты и ширины.

var el = $("p.foo");
el.css({
        "margin":"20px",
        "border":"2px solid black"
    });
console.log("Внутренняя ширина: "+el.innerWidth()+"px");
console.log("Внутренняя высота: "+el.innerHeight()+"px");
console.log("Внешняя ширина: "+el.outerWidth()+"px");
console.log("Внешняя высота: "+el.outerHeight()+"px");
console.log("Внешняя ширина с полями: "+el.outerWidth(true)+"px");
console.log("Внешняя высота с полями: "+el.outerHeight(true)+"px");

 Результирующий вывод в консоли будет выглядеть следующим образом.