title: CSS line-height on inline element
body: <p>is it possible to change the line-height within a paragraph?</p>
  
  <p>for example, if i have a paragraph or div or label set at a particular font-size &amp; line-height, and need the last part of that text to be smaller, i can do a span within the p or div and change the font-size just fine, but any adjustments to the line-height do not work.</p>
  
  <p>i know i can just change the span to a block or inline-block, but then that wraps the text under that paragraph. i'd like to keep the text running inline if possible.</p>
  
  <p>example @ <a href="https://jsfiddle.net/fye8bcjx/" rel="nofollow noreferrer">https://jsfiddle.net/fye8bcjx/</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>p {
    font-size: 18px;
    line-height: 2;
  }
  
  span {
    font-size: 12px;
    line-height: 1;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>---
  &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi.
    &lt;span&gt;Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero.
          &lt;/span&gt;
  &lt;/p&gt;</code></pre>
  </div>
  </div>
  </p>