html - 我无法删除字母之间的间距。即使字母间距为 0px，它仍然有太多空间

Question

我想为每个单独的字母设置样式，我遇到了一个问题，我的字母间距关闭，唯一的解决方案是提供负的字母间距，但这会产生另一个问题，即我的悬停效果被 -x 像素关闭。

<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;">’&lt;/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>

标签： htmlcss

Answer 1

我通过删除 HTML 中跨度标签之间的所有空白来使其看起来正确，就像这样..

编辑：抱歉格式不好，这是一个代码笔：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;">’&lt;/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>