title: Why does reducing the font-size of a SPAN element inside a paragraph increase the height of the paragraph?
body: <p>I am displaying two DIV panels with the code below. The only difference between the two panels is that the SPAN element within the first DIV element has a <code>font-size: 14px</code> style applied to it while that of the second DIV element doesn't have this style. On Firefox as well as Chrome the first panel appears to have a greater height than the second one. Here is a demo URL: <a href="http://jsfiddle.net/UWX2u/" rel="noreferrer">http://jsfiddle.net/UWX2u/</a></p>
  
  <p>A copy of the code follows:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;Margin border&lt;/title&gt;
  &lt;style type="text/css"&gt;
  body {
      line-height: 38px;
      font-size: 32px;
  }
  
  #panel1 {
      background: #00a000;
      float: left;
  }
  
  #panel2 {
      background: orange;
      float: left;
  }
  
  #panel1 p span {
      font-size: 14px;
  }
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
      &lt;div id="panel1"&gt;
          &lt;p&gt;Foo &lt;span&gt;Bar&lt;/span&gt;&lt;/p&gt;
      &lt;/div&gt;
  
      &lt;div id="panel2"&gt;
          &lt;p&gt;Foo &lt;span&gt;Bar&lt;/span&gt;&lt;/p&gt;
      &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>With Firebug I could see that the computed height of the P element in the first DIV is 44.1833px while that of the P element in the second DIV is 38px. Why does this difference occur?</p>
  
  <p>If I remove the <code>line-height: 38px</code> property from the CSS, both DIV elements have the same height. Here is a page that demonstrates this: <a href="http://jsfiddle.net/FJUDn/" rel="noreferrer">http://jsfiddle.net/FJUDn/</a></p>