CSS: prevent text overlap

Question

I'm using some customized <sub>...</sub> to provide index subscripts in certain <tt> regions:

 tt.indexed sub
 {
     color:#0000ff;
     position:relative;
     top:0.5em;
     right:1em;
     margin-right:-0.5em;
 }
 tt.indexed sub:last-child
 {
     margin-right:-1em;
 }

Basically to pretty up stuff like 0₀₀0₀₁ 0₀₂1₀₃ 1₀₄0₀₅ 1₀₆0₀₇ and make it a bit more compact.

However, I'm having an issue where lines beneath my <tt class="indexed"> regions overlaps the custom subscripts (just a little, but it's visually annoying). I tried upping the margin-bottom on tt.indexed sub, but it didn't seem to have an effect. Do I have to set a margin-bottom on tt.indexed, or is there a setting I can use in tt.indexed sub?

Answer 1

Try using a line-height declaration with em.