title: jQuery : $('div.myclass').height() is not accurate
body: <blockquote>
    <p><strong>Possible Duplicate:</strong><br>
    <a href="https://stackoverflow.com/questions/12709506/why-jquery-height-get-a-different-result-on-chrome">why jquery .height() get a different result on chrome?</a>  </p>
  </blockquote>
  
  
  
  <p>I have a <code>&lt;div&gt;</code> with CSS class <code>myclass</code>. The CSS class is as follow:</p>
  
  <pre><code>.myclass {
      position: absolute;
      width: 192px;
      font-size: 11px;
      background-color: #FFF;
      padding: 15px 15px 0;
      box-shadow: 0 1px 3px rgba(34, 25, 25, 0.4);
      -moz-box-shadow: 0 1px 3px rgba(34, 25, 25, 0.4);
      -webkit-box-shadow: 0 1px 3px rgba(34, 25, 25, 0.4);    
      display: block;
  }
  </code></pre>
  
  <p>It does not specify height. Contents are loaded dynamically by PHP. In jQuery's <code>$(document).ready(function() { });</code>, I debug the height of the div by:</p>
  
  <pre><code>console.log($('div.myclass').height()); // the result = 330
  </code></pre>
  
  <p>HTML :</p>
  
  <pre><code>&lt;div class="myclass"&gt;
  &lt;img src="image.png" /&gt;
  &lt;p&gt;Text here text here&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>However, if I use the <code>Inspect Element</code> feature in Google Chrome, it shows <strong>531px</strong>. Why there is a difference? How can I get the <code>531px</code> value?</p>
  
  <p><strong>UPDATE</strong>: <code>$(this).outerHeight(); // 345px, as there is 15px margin</code></p>