Question

我一直在为我正在制作的网站编写示例代码，但是我遇到了一个我无法解决的非常奇怪的问题。我在随机范围元素之间出现了无法解释的空格，而且我似乎无法找出任何解释。帮助将不胜感激。

空白出现在突出显示的位置。

<html>
<style>
    @keyframes typing { from { width: 0; } }
    @keyframes blink-caret {
from, to { border-color: orange }
 50% { border-color: transparent; }
   }

    h1 { 
        font: bold 300% Consolas, Monaco, monospace;
        border-right: .1em solid transparent;
        width: 16.5em; 
        width: 15ch;
        margin: 2em 1em;
        white-space: nowrap;
        overflow: hidden;
        animation: typing 1s steps(6, end),
                   blink-caret .3s step-end 8 alternate;
    }


@keyframes rubberBand {
  0% {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }

  30% {
    -webkit-transform: scaleX(1.25) scaleY(0.75);
    -ms-transform: scaleX(1.25) scaleY(0.75);
    transform: scaleX(1.25) scaleY(0.75);
  }

  40% {
    -webkit-transform: scaleX(0.75) scaleY(1.25);
    -ms-transform: scaleX(0.75) scaleY(1.25);
    transform: scaleX(0.75) scaleY(1.25);
  }

  60% {
    -webkit-transform: scaleX(1.15) scaleY(0.85);
    -ms-transform: scaleX(1.15) scaleY(0.85);
    transform: scaleX(1.15) scaleY(0.85);
  }

  100% {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }
}

span:hover { color: red;
    animation: rubberBand;
    animation-duration: 2s;
    }
    span{
        display: inline-block;
    }

</style>
<body>
<div>
    <h1 id="intro"> <span>H</span><span>i</span><span>,</span><br><span>I</span><span>'</span>
        <span>m</span><span>e</span><span>e</span>
        <span>e</span><span>e</span><span>e</span><span>e</span><span>e</span><span>,</span><br>
         <span>a</span><span>e</span><span>r</span><span>a</span><span>g</span><span>o</span><span>n</span><span>f</span>
         <span>l</span><span>y</span><span>r</span>
         </h1>
</div>
</body>
</html>

https://jsfiddle.net/peacefulgoldfish/2sg9ujpb/2/

谢谢您的帮助，似乎无法理解这里发生的事情

H1跨度中出现无法解释的空格

0 个答案: