Get sum of margin and height with jQuery

Question

I want to get the sum of margin-top size and height of another layer.

the margin-top of .nav1 is 30px and the height of .main is 28px

I use this code:

$('.nav').css('margin-top').replace('px', '') + $('.main').outerHeight()

but the result of my sum is 3028

How can I calculate the sum of these two numbers?

Answer 1

You can use outerHeight(true) to add margins to height without the maths, if you want to count margin-top and margin-bottom properties : http://api.jquery.com/outerheight/#outerHeight-includeMargin

var heightWithMargin = $('.main').outerHeight(true);

Answer 2

This is because you are appending two strings, instead of adding two integers. Try this:

var total = parseInt($('.nav').css('margin-top'), 10) + $('.main').outerHeight();