title: line-height ignored when image is in the text
body: <p>I'm trying to display a text in a div </p>
  
  <pre><code>&lt;div style='line-height: 16px;'&gt;$text&lt;/div&gt;
  </code></pre>
  
  <p>The 16px line height is OK until I put some images into the $text (basically I replace the smiley signs with 15px high smiley images). In this case the line-height become 19px.
  How can I force the lines to keep the 16px height regardless if there is image or not?
  (margin, padding, border: 0px for each elements)</p>
  
  <p>example here:</p>
  
  <pre><code>&lt;style type="text/css"&gt;
  div {
    color: black;
    font-family: Verdana;
    font-size: 12px;
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
    border: none;
    position: absolute;
    -webkit-box-sizing: border-box;
    -o-box-sizing: border-box;
    -moz-box-sizing: border-box;}
  
  div.comment_text {
    left: 10px;
    right: 10px;
    line-height: 16px;
    overflow: auto;}
  &lt;/style&gt;
  
  &lt;div class='comment_text' style='top: 20px;'&gt;
    the measured line height here 16px which is OK
    &lt;br/&gt;&lt;a href="mailto:myaddress@gmail.com" target='_blank'&gt;myaddress@gmail.com&lt;/a&gt;
    &lt;br/&gt;&lt;a href="http://www.facebook.com" target='_blank'&gt;http://www.facebook.com&lt;/a&gt;
    &lt;br/&gt;this
    &lt;br/&gt;lines
    &lt;br/&gt;are
    &lt;br/&gt;for
    &lt;br/&gt;example
    &lt;br/&gt;to
    &lt;br/&gt;demonstrate
    &lt;br/&gt;my
    &lt;br/&gt;problem
  &lt;/div&gt;    
  
  &lt;div class='comment_text' style='top: 300px;'&gt;
    &lt;img class='relative' style='top: 0px; max-height: 16px;' src='../images/smileys/tongue_out.png'/&gt; the measured line-height here 17px which is wrong
    &lt;br/&gt;i'm a 15px high image: &lt;img class='relative' style='top: 0px; max-height:16px;' src='../images/smileys/grinning.png'/&gt;
    &lt;br/&gt;me too: &lt;img class='relative' style='top: 0px; max-height: 16px;' src='../images/smileys/winking.png'/&gt;
  &lt;/div&gt;
  </code></pre>