Get the sum of margin and height using jQuery

Question

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

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

I am using this code:

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

but the result of my sum is 3028

How can I sum these tow numbers?

Answer 1

This is because you are adding two lines instead of adding two integers. Try the following:

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

Answer 2

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

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