Try Online - TutorialKart

index.html

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  var width = $("#pid").width();
  var innerWidth = $("#pid").innerWidth();
  var outerWidth = $("#pid").outerWidth();
  var outerWidthTrue = $("#pid").outerWidth(true);
  var height = $("#pid").height();
  var innerHeight = $("#pid").innerHeight();
  var outerHeight = $("#pid").outerHeight();
  var outerHeightTrue = $("#pid").outerHeight(true);
  
  $( "#output" ).html("width() : " + width + "<br>");
  $( "#output" ).append("innerWidth() : " + innerWidth + "<br>");
  $( "#output" ).append("outerWidth() : " + outerWidth + "<br>");
  $( "#output" ).append("outerWidth(true) : " + outerWidthTrue + "<br><br>");
  $( "#output" ).append("height() : " + height + "<br>");
  $( "#output" ).append("innerHeight() : " + innerHeight + "<br>");
  $( "#output" ).append("outerHeight() : " + outerHeight + "<br>");
  $( "#output" ).append("outerHeight(true) : " + outerHeightTrue + "<br>");
});
</script>
</head>
<body>

<p style="padding:5px;border:2px solid #CCC;margin:4px;" id="pid">A paragraph</p>
<h2>Paragraph Dimensions</h2>
<p id="output"><p>

</body>
</html>