Atributo css no se asigna

[AngelKrak]

para que Funcione es como te dijo osvaldo ;)

Seria algo asi:

Código Javascript:

'margin-top', distancia + 'px'
 

Asignas al css, que Baje X Pixeles, Asignas la Variable Distancia(para que recoja el valor del input) y le sumas el + para especificar que 'px' sea el texto después de la Variable.

Un Ejemplo(Puedes dejarlo asi, pero no se movera por que no le estas asignando que quieres que baje(Pixeles, Porcentajes, etc..)

Código Javascript:

'margin-top', distancia
 

Ahi te dejo un Ejemplo con Pixeles y Porcentajes:

Demo:
http://codepen.io/AngelKrak/pen/bENgWO

Código HTML:

<div class="uno">
<input type="number" id="distancia" name="distancia" placeholder="Distancia...">
<button id="calcular">Calcular</button>
<div class="globo">Se ha Movido <span></span></div>
</div>
 
<div class="dos">
<input type="number" id="distancia2" name="distancia" placeholder="Distancia...">
<button id="calcular2">Calcular</button>
<div class="globo2">Se ha Movido <span></span></div>
</div>
 

Código Javascript:

//Con Pixeles
$('#calcular').click(function() {
  var distancia = $('#distancia').val();
  $(".globo span").text(distancia + "px");
  $('.globo').css('margin-top', distancia + 'px');
});
 
//Con Porcentajes
$('#calcular2').click(function() {
  var distancia2 = $('#distancia2').val();
  $(".globo2 span").text(distancia2 + "%");
  $('.globo2').css('margin-top', distancia2 + '%');
});