How to reduce letter spacing between div letters H,2,O

Question

  div  { 
    display: inline;

}
.sub1{
    vertical-align: sub;
    font-size:x-small;
}

    <div>H</div>
    <div class="sub1">2</div>
    <div>O</div>

Problem is the letter space between H, 2(subscript), 0 renders high and I wanna compact the letter spacing more.

I can't use letter-spacing less than 1 px as it is not effective.

Any particular reason why you put each letter in a different `div`? Why don't you use `_{` for it? For example: `H₂O
`} — node_modules, Dec 05 '22 at 08:18
@JamesC Try [some libraries](https://stackoverflow.com/questions/12431339/how-to-write-equations-in-html) instead of trying it to do by yourself — Justinas, Dec 05 '22 at 08:35

score 1 · Accepted Answer · answered Dec 05 '22 at 08:19

1

Write in one div and only wrap 2 in span

div  { 
    display: inline;

}
.sub1{
    vertical-align: sub;
    font-size:x-small;
}

<div>
H<span class="sub1">2</span>O
</div>

answered Dec 05 '22 at 08:19

Justinas

score 1 · Answer 2 · answered Feb 13 '23 at 06:03

  div  { 
    letter-spacing:-0.05em;

}
sub {
    vertical-align: sub;
    font-size:x-small;
}

    <div>H<sub>2</sub>O</div>

You can use letter-spacing with a negative value to reduce letter spacing. I prefer to use em values because they are relative to font-size.

As others mentioned in their comments, it would be better to use <sub> instead of <span> for this purpose.

score 0 · Answer 3 · answered Feb 13 '23 at 05:56

    div  { 
    display: block;
}
.sub1{
    vertical-align: sub;
    font-size:x-small;
}

<div>H<span class="sub1">2</span>O</div>
<div>CO<span class="sub1">2</span></div>
<div>SO<span class="sub1">4</span></div>

I have made some minor change with regards to styling and html content

3 Answers3