title: Line height incorrect for paragraph containing span with smaller font size
body: <p>I have a problem with the <code>line-height</code> style in paragraphs filled with a <code>span</code>, when the font size in the <code>span</code> is smaller than that of the paragraph.</p>
  
  <p>My Angular application has an editable <code>div</code> element, and I use the <a href="https://www.froala.com/wysiwyg-editor" rel="nofollow noreferrer">Froala editor</a> API commands to allow formatting. I added my own custom commands to modify the <code>line-height</code> in paragraphs.</p>
  
  <p>The CSS sets a default font size and line height for the editor:</p>
  
  <pre><code>div {
    font-size: 20px;
    line-spacing: 1.25;
  }
  </code></pre>
  
  <p>The initial markup is something like this:</p>
  
  <pre><code>&lt;div&gt;
    &lt;p&gt;Some long text that wraps here...&lt;/p&gt;
    &lt;p&gt;Some long text that wraps here...&lt;/p&gt;
    &lt;p&gt;Some long text that wraps here...&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>After setting the font size and line height with the editor, the markup becomes:</p>
  
  <pre><code>&lt;div&gt;
    &lt;p style="line-height: 1;"&gt;&lt;span&gt;Some long text that wraps here...&lt;/span&gt;&lt;/p&gt;
    &lt;p style="line-height: 1;"&gt;&lt;span style="font-size: 8px;"&gt;Some long text that wraps here...&lt;/span&gt;&lt;/p&gt;
    &lt;p style="line-height: 1;"&gt;&lt;span style="font-size: 40px;"&gt;Some long text that wraps here...&lt;/span&gt;&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>As long as the font size in the <code>span</code> is equal or larger than the font size of the paragraph (in the present case, <code>20px</code>), the line height scales correctly. However, when the font size in the <code>span</code> is smaller than that of its paragraph, the line height does not scale as it should. The problem can be seen in <strong><a href="https://jsfiddle.net/ConnorsFan/a1rv5z69/" rel="nofollow noreferrer">this jsfiddle</a></strong>.</p>
  
  <p>If I set <code>display: inline-block</code> on the <code>span</code> elements, the line height scales properly but that display setting messes up the wrapping in the editor. Otherwise, the only workaround that I can think of is to use data binding to set the line height with pixel units, after retrieving the font size inside of the paragraph. Is there a simpler way to force the line height to adjust to <code>span</code> elements with a smaller font size?</p>