Atributo css no se asigna

[kenproxd]

Hola, necesito hacer un formulario en el que, al ingresar un número y dar clic en un botón, dicho número se le agregue como margin-top a un div en especifico. Lo he hecho de la siguiente manera:

Código HTML:

<input type="number" id="distancia" name="distancia" placeholder="Distancia...">
<button id="calcular">Calcular</button>
 

Código Javascript:

$('#calcular').on('click',function(){
    var distancia = $('#distancia').val();
    console.log(distancia);
    $('.globo').css('margin-top',+ distancia + ' px');
});
 

Con el console.log he comprobado que la variable distancia si esta obteniendo el valor del campo, sin embargo no se le agrega como atributo al div .globo. Tampoco sale ningún error en la consola.

He probado cambiar la ultima línea por:

$('.globo').css('margin-top','50 px');

y de esa manera sí funciona pero como ya expliqué al inicio, necesito que el margin sea el ingresado por el usuario en el input.

Espero puedan ayudarme