html - How to remove the space between words CSS

Question

I added some letter-spacing to my strong elements and I had a large space at the beginning of each word : .

I tried to add word-spacing: -4px but space stays the same :/ How could I remove this space (between the "The" and the "852" ?) I would like each letter to be at the same distance. Like if there were no spaces between the words.

CSS:

.sub-lead {
    text-align: justify;
    font-family: 'Poppins', sans-serif;
    font-weight: 300;
}

strong {
    letter-spacing: 3px;
}

HTML :

<div class="sub-lead">
    <strong> THE </strong> 8 5 2 <strong> EXPERIENCE </strong> 9 0 <strong> YOU </strong> 0 8 5 <strong> ARE </strong>
</div>

PS: I also tried to remove the spaces in the code but it changes nothing.

EDIT: The space between each character of the text must be the same, even if it's not the same word. That's why I tried to use letter-spacing on strong elements.

Answer 1

Your problem is because you're adding multiple spaces together, but without   in an inline text element, only one space will render. This is due to white space collapse. This is causing the space to render at the first letter-spacing, which is big at the start, and smaller at the end. Adjust your spacing accordingly and it should work, e.g. start each section with a space, instead of adding one at the start and end.

Depending on the font rendering's actual size, you may still end up with some sub-pixel irregularity, but unless you want to remove all the spacing and add some margin to the <strong> tags, this is probably a decent starting point.

.sub-lead {
    text-align: justify;
    font-family: 'Poppins', sans-serif;
    font-weight: 300;
}

strong {
    letter-spacing: 3px;
}

<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;700;800&display=swap" rel="stylesheet">
<div class="sub-lead">
    <strong>THE</strong> 8 5 2<strong> EXPERIENCE</strong> 9 0<strong> YOU</strong> 0 8 5<strong> ARE</strong>
</div>