Is jQuery externalHeight not working correctly?

Question

Link Style:

#carousel ul li { display: inline-block; border: solid 1px red; margin: 50px 25px 50px 25px; width: 350px; height: 300px; } 

JQuery Code:

 var height = $("#carousel ul li").outerHeight(); document.write(height); 

And he says the element height is 302px! What for? It can be 302 with borders, but externalHeight should not show 300 + 2 + 100 (upper and lower margins are 50 pixels).

I'm confused.

Thanks.

Answer 1

By default, externalHeight () does not include fields. Pass true to include the fields in the calculation as follows:

 var height = $("#carousel ul li").outerHeight(true); 

Answer 2

Nope. margin is not taken into account. height, border and padding is.

if your li contains block elements with a margin that is counted.

Answer 3

Try:

 var height = $("#carousel ul li").height(); 

Or:

 var height = $("#carousel ul li").css('height');