SOURCE

<div></div>
<p></p>

<script>
  var div = $("div");
	$("p").html(
    "width:"+div.width()+
    " / height:"+div.height()+
    "<br><br>innerWidth:"+div.innerWidth()+
    " / innerHeight:"+div.innerHeight()+
    "<br><br>outerWidth:"+div.outerWidth()+
    " / outerHeight:"+div.outerHeight()+
    "<br><br>outerWidth(true):"+div.outerWidth(true)+
    " / outerHeight(true):"+div.outerHeight(true)+
    "<br><br>marginTop:"+parseFloat(div.css("marginTop"))+
    "<br>positiontop:"+div.position().top+
    "<br>offsettop:"+div.offset().top
    
  )
</script>

*{padding:0;margin:0;}
div{
  background-color:red;
  width:100px;
  height:100px;
  margin:10px;
  border:10px solid blue;
  padding:10px;
  position:relative;
  top:30px;
}
p{position:relative;top:50px}