H2怪异度内的跨度间距

Question

我注意到我的跨度有奇怪的间距。这不是主要问题，只是对原因感到好奇。

 <div id="timerDiv">
  <h2>Stopwatch</h2>
  <h2>
      <span class="stopwatchSpan" id="timerDisplayHr">00</span>
      <span>:</span>
      <span class="stopwatchSpan" id="timerDisplayMin">00</span>
      <span>:</span>
      <span class="stopwatchSpan" id="timerDisplaySec">00</span>
      <span>:</span>
      <span class="stopwatchSpan" id="timerDisplayMsec">00</span>
    </h2>
  <button id="timerBtnStart">Start</button>
    <button id="timerBtnStop">Stop</button>
    <button id="timerBtnReset">Reset</button>
</div>

跨度没有边界，没有填充，但是在检查元素时，跨度之间存在一个空间，检查人员无法确认。 （图片1）

为了解决这个问题，我使用了一个技巧（从好的'ol Stackoverflow中学到的）来使表对接在一起：我将所有html代码/标签彼此并排成一行，且没有间距。 （图片2）

所以，我的问题是：为什么在这种情况下空白很重要，因为通常情况下浏览器会忽略代码空白。

是吗？通常情况下它是如此微小以至于在出现这种情况之前我们不会注意到它吗？

此外，通过“全部在线”方法“解决”问题，“：”跨度仍略有偏移，因为它们不在指定空间的中心，但由于缺乏更好的定位术语，在其字符或跨度空间内向左对齐。 （图片2）

Answer 1

当2个内联块元素彼此相邻时，会出现此问题。想一想，当您向h1添加文本时，它会尊重两个单词The word之间的间距，但是如果您不添加空格，它将显示为theword。

在您的情况下，您将span移到了新行，浏览器将其折叠到一个空格

<div id="timerDiv">
  <h2>Stopwatch</h2>
  <h2>
      <span class="stopwatchSpan" id="timerDisplayHr">00</span><span>:</span><span class="stopwatchSpan" id="timerDisplayMin">00</span><span>:</span><span class="stopwatchSpan" id="timerDisplaySec">00</span><span>:</span><span class="stopwatchSpan" id="timerDisplayMsec">00</span>
    </h2>
  <button id="timerBtnStart">Start</button>
    <button id="timerBtnStop">Stop</button>
    <button id="timerBtnReset">Reset</button>
</div>