jQuery outerHeight ne fonctionne pas correctement ?

Question

Le style de Link :

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

Le code de jQuery :

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

document.write(height);

Et il est dit que la hauteur de l'élément est de 302px ! Pourquoi ? C'est peut-être 302 avec les bordures, mais outerHeight ne devrait-il pas afficher 300 + 2 + 100 (les marges supérieure et inférieure sont toutes deux de 50 px).

Je suis confus.

Merci.

Answer 1

Par défaut, outerHeight() n'inclut pas les marges. Passez true pour inclure les marges dans le calcul comme ceci :

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

Answer 2

Non, la marge n'est pas prise en compte, mais la hauteur, la bordure et le rembourrage le sont.

si votre li contient des éléments de bloc avec une marge, cela est pris en compte.

Answer 3

Essayez :

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

Ou :

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