title: img tag throwing off line-height
body: <p>Alright, so this is some of the css and html:</p>
  
  <p>css:</p>
  
  <pre><code>div {
      height:24px;
      line-height:24px;
  }
  </code></pre>
  
  <p>html:</p>
  
  <pre><code>&lt;div&gt;&lt;img src="image.png"/&gt;Text&lt;/div&gt;
  </code></pre>
  
  <p>Now what that should (I think) produce is a div that is 24 pixels high, and the text should be vertically center aligned in the div, after the image. P.S. the image is 24x24px. However, it throws off the line-height to be about 12px too much (reducing the line-height to 12px does not solve it). Changing the image to be 12x12px though works and puts the text in the right spot. if the image is completely removed, the text is in the right spot. I guess my question is why is that doing what it is, and if/how I can fix it.</p>
  
  <p>Thanks, sharf.</p>