title: jQuery outerHeight doesn't work properly?
body: <p>Link's style:</p>
  
  <pre><code>#carousel ul li {
      display: inline-block;
      border: solid 1px red;
      margin: 50px 25px 50px 25px;
      width: 350px;
      height: 300px;
  }
  </code></pre>
  
  <p>jQuery's code:</p>
  
  <pre><code>var height = $("#carousel ul li").outerHeight(); 
  
  document.write(height);
  </code></pre>
  
  <p>And it says height of the element is 302px ! Why? It's maybe 302 with borders, but shouldn't outerHeight show 300 + 2 + 100 (both top and bottom margins are 50 px).</p>
  
  <p>I'm confused.</p>
  
  <p>Thanks.</p>