h2怪异内的跨度间距[重复]答案

【问题标题】：Spacing of spans inside h2 weirdness [duplicate]h2怪异内的跨度间距[重复]
【发布时间】：2019-03-05 16:54:10
【问题描述】：

我注意到我的跨度有奇怪的间距。这不是一个大问题，只是好奇为什么。

 <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>

span 没有边框，没有填充，但是在检查元素时，span 之间有一个空格，检查员没有确认。（图一）

为了解决这个问题，我使用了一个我学到的技巧（从优秀的 Stackoverflow 中学到）将表格拼接在一起：我将所有 html 代码/标签彼此相邻地放在一行上，没有间距。（图二）

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

还是这样？是不是很轻微，直到我们遇到这种情况才会注意到它？

此外，通过“all on one line”方法“修复”了问题，“:”跨度仍然略微偏移，因为它们不在指定空间的中心，但由于缺乏更好的术语，在其字符或跨度空间内左对齐。（图二）

【问题讨论】：

浏览器不会忽略空格，而是将其折叠为内联（或内联块）元素之间的单个空格。
但是，正如我所说，这很奇怪，因为您可以通过删除 HTML 中的空白来摆脱它，这通常会被浏览器忽略。此外，似乎没有人处理在指定空间左对齐的字符。
当然，如果您从 HTML 中删除空格，那么浏览器将不会呈现任何内容。字符对齐方式特定于您使用的字体。

标签： html css whitespace spacing

【解决方案1】：

当 2 个 inline-block 元素彼此相邻时会出现此问题。想一想，当您向 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>

【讨论】：

好的，这是有道理的。我还假设“：”或任何其他字母在默认情况下左对齐，在分配的空间中，而不是居中。