Raise or lower a span but don't have it take up extra vertical space-CodePudding

I'm setting the LaTeX logo using CSS with the following styles:

.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;
}

and then I can write, e.g.,

L<span class="LaTeXA">A</span>T<span class="TeXE">E</span>X

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?

CodePudding user response：

vertical-align adjusts the space taken up by the text to ensure there's always room for it in its new location. This is not suitable for decorative text effects that are meant to take up the same space as the undecorated text. Instead, use a CSS translate:

.TeXE {
transform: translate(0, 0.5ex);
display: inline-block;
margin-left: -0.1667em;
margin-right: -0.125em;
}

.LaTeXA {
font-size: 0.85em;
transform: translate(0, -0.15em);
display: inline-block;
margin-left: -0.36em;
margin-right: -0.15em;
}

<ol>
<li>Test</li>
<li>L<span class="LaTeXA">A</span>T<span class="TeXE">E</span>X</li>
<li>Test</li>
</ol>

CSS transforms (such as translate) move the element purely visually, without affecting the position of any other element.