jQuery outerHeight doesn't work properly?

Question

Hey, I have a ul li menu.

Link's style:

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

jQuery's code:

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

document.write(height);

And it says height of the element is 302px ! Why? It's maybe 302 with borders, but shouldn't outerHeight show 300 + 2 + 100 (both top and bottom margins are 50 px).

I'm confused.

Thanks.

Answer 1

Nope. margin isn't counted. height, border and padding is.

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

Answer 2

Try:

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

Or:

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

Answer 3

By default outerHeight() does not include margins. Pass true to include margins in the calculation like this:

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