I can't remove spacing between letters. Even with 0px letter spacing it still has too much space

Question

I want to style each individual letter and I am running into an issue where my letter spacing is off and the only solution is to provide a negative letter spacing but that creates another issue, which is that my hover effects are off by -x pixels.

<div class="main">        
    <!-- Header -->
    <div class="header" id="home">
        <h1 aria-label=" Hi, I’m Brandon, Developer." style="letter-spacing:0px;">
            <span class="blast" aria-hidden="true" style="opacity: 1;">H</span>
            <span class="blast" aria-hidden="true" style="opacity: 1;">i</span>
            <span class="blast" aria-hidden="true" style="opacity: 1;">,</span>
            <br> <span class="blast" aria-hidden="true" style="opacity: 1;">I</span>
            <span class="blast" aria-hidden="true" style="opacity: 1;">’</span>
            <span class="blast" aria-hidden="true" style="opacity: 1;">m</span>
            <span class="blast" aria-hidden="true" style="opacity: 1;"> </span>
            <span class="blast" aria-hidden="true" style="opacity: 1;">B</span>
            <span class="blast" aria-hidden="true" style="opacity: 1;">r</span>
            <span class="blast" aria-hidden="true" style="opacity: 1;">a</span>
            <span class="blast" aria-hidden="true" style="opacity: 1;">n</span>
            <span class="blast" aria-hidden="true" style="opacity: 1;">d</span>
            <span class="blast" aria-hidden="true" style="opacity: 1;">o</span>
            <span class="blast" aria-hidden="true" style="opacity: 1;">n</span>
            <span class="blast" aria-hidden="true" style="opacity: 1;">,</span>
            <br> <span class="blast" aria-hidden="true" style="opacity: 1;">D</span>
            <span class="blast" aria-hidden="true" style="opacity: 1;">e</span>
            <span class="blast" aria-hidden="true" style="opacity: 1;">v</span>
            <span class="blast" aria-hidden="true" style="opacity: 1;">e</span>
            <span class="blast" aria-hidden="true" style="opacity: 1;">l</span>
            <span class="blast" aria-hidden="true" style="opacity: 1;">o</span>
            <span class="blast" aria-hidden="true" style="opacity: 1;">p</span>
            <span class="blast" aria-hidden="true" style="opacity: 1;">e</span>
            <span class="blast" aria-hidden="true" style="opacity: 1;">r</span>
            <span class="blast" aria-hidden="true" style="opacity: 1;">.</span>
        </h1>
        <h2><strong>Software Developer</strong></h2>
    </div>
    <!-- /Header -->
</div>

Picture doesn't help us debug what's going on - can you make an [MCVE](https://stackoverflow.com/help/mcve) within your question? — chazsolo, Dec 12 '18 at 20:18

jleggio · Accepted Answer · 2018-12-12T20:22:01.610

I got it looking correct by removing all the white space in between your span tags in your HTML like so..

EDIT: Sorry for the poor formatting, heres a code pen: https://codepen.io/anon/pen/yGYojm

<div class="main">        
    <!-- Header -->
    <div class="header" id="home">
        <h1 aria-label=" Hi, I’m Brandon, Developer." style="letter-spacing:0px;">
            <span class="blast" aria-hidden="true" style="opacity: 1;">H</span><span 
class="blast" aria-hidden="true" style="opacity: 1;">i</span><span class="blast" aria-
hidden="true" style="opacity: 1;">,</span>
           <br> <span class="blast" aria-hidden="true" style="opacity: 1;">I</span>
<span class="blast" aria-hidden="true" style="opacity: 1;">’</span><span class="blast" 
aria-hidden="true" style="opacity: 1;">m</span><span class="blast" aria-hidden="true" 
style="opacity: 1;"> </span><span class="blast" aria-hidden="true" style="opacity: 
1;">B</span><span class="blast" aria-hidden="true" style="opacity: 1;">r</span><span 
class="blast" aria-hidden="true" style="opacity: 1;">a</span><span class="blast" aria-
hidden="true" style="opacity: 1;">n</span><span class="blast" aria-hidden="true" 
style="opacity: 1;">d</span><span class="blast" aria-hidden="true" style="opacity: 
1;">o</span><span class="blast" aria-hidden="true" style="opacity: 1;">n</span><span 
class="blast" aria-hidden="true" style="opacity: 1;">,</span>
        <br> <span class="blast" aria-hidden="true" style="opacity: 1;">D</span><span 
 class="blast" aria-hidden="true" style="opacity: 1;">e</span><span class="blast" aria-
hidden="true" style="opacity: 1;">v</span><span class="blast" aria-hidden="true" 
style="opacity: 1;">e</span><span class="blast" aria-hidden="true" style="opacity: 
1;">l</span><span class="blast" aria-hidden="true" style="opacity: 1;">o</span><span 
class="blast" aria-hidden="true" style="opacity: 1;">p</span><span class="blast" aria-
hidden="true" style="opacity: 1;">e</span><span class="blast" aria-hidden="true" 
style="opacity: 1;">r</span><span class="blast" aria-hidden="true" style="opacity: 
1;">.</span>
    </h1>
    <h2><strong>Software Developer</strong></h2>
</div>
<!-- /Header -->
</div>

You rock! Thank you, I didn't know that the white spacing had any effect! — Bkwiat, Dec 12 '18 at 20:22
@Bkwiat Glad that was correct. If you found this helpful please mark the answer as correct. :) — jleggio, Dec 12 '18 at 20:23
Oh and just a side note, if you want to keep the new line format, could add to the parent an adjustment like `letter-spacing:-4px` and an additional ` ` between words. — Chris W., Dec 12 '18 at 20:27
I added a font size of 0 to the parent tag and that helped me keep the new line format. Then for the spaces I actually needed I used — Bkwiat, Dec 12 '18 at 20:38

I can't remove spacing between letters. Even with 0px letter spacing it still has too much space

1 Answers1