title: scrollHeight gives incorrect value when height property is provided in css
body: <p>I tried to get the scrollHeight of my div and I am getting it right but when I add height property in the css for that particular div I am getting a different value.</p>
  
  <p>Just run the <a href="http://jsfiddle.net/eagf7/25/" rel="nofollow">fiddle</a> and you will see in console value of scrollheight property to be equal to 268 (which is equal to the sum of the heights of all the children)</p>
  
  <p>but when I add a height value in the css (say height:50px;) the output comes out to be 252 (the difference is the margin of the last child element, I think).</p>
  
  <p>can anybody please answer why there is a discrepancy ?</p>
  
  <p><strong>Edit</strong>
  Since the question was not clear I have rephrased id. When I specify the height of parent div I get the scroll Height as 252 pixels while if I do not specify the height or set it to "auto" I get 268 pixel. I just wanted to know why margins do not collapse in the later case as well ? I am not worried about the collapsed margins but just want to know why the scroll height is different in these two scenarios ?</p>
  
  <p>The answer given below is perfectly fine. However I also got the correct scrollHeight using javascript (including the bottom margin of the last child)</p>
  
  <pre><code>var h = $(div).height();
  $(div).height("auto");
  var ch = $(div)[0].scrollHeight;
  $(div).height(h);
  </code></pre>