title: Raise or lower a span but don't have it take up extra vertical space
body: <p>I'm setting the LaTeX logo using CSS with the following styles:</p>
  <pre><code>.TeXE {
      vertical-align: -0.5ex;
      margin-left: -0.1667em;
      margin-right: -0.125em;
  }
  
  .LaTeXA {
      font-size: 0.85em;
      vertical-align: 0.15em;
      margin-left: -0.36em;
      margin-right: -0.15em;
  }
  </code></pre>
  <p>and then I can write, e.g.,</p>
  <pre><code>L&lt;span class=&quot;LaTeXA&quot;&gt;A&lt;/span&gt;T&lt;span class=&quot;TeXE&quot;&gt;E&lt;/span&gt;X
  </code></pre>
  <p>to set the logo. The problem I'm running into is that I'm seeing excessive line spacing whenever the logo is printed. Increasing the line spacing doesn't change that (at least not in Safari, but probably not in other browsers either). So the question is, how can I modify my CSS to hide that extra height/depth?</p>
  <p><a href="https://i.stack.imgur.com/MOunc.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/MOunc.jpg" alt="enter image description here" /></a></p>