Spacing of spans inside h2 weirdness

Question

I noticed that my spans have strange spacing. It's not a major problem, just curious as to why.

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

The spans show no border, no padding, but when inspecting the element there is a space, not acknowledged by the inspector, between spans. (Pic 1)

To fix it, I used a trick I learned (from good 'ol Stackoverflow) to make tables butt up together: I put all of the html code/tags next to each other on one line with no spacing. (Pic 2)

So, my question is: why does white space matter in this situation, where normally the browser ignores code white space.

Or does it? Is it normally so minor that we don't notice it until we get a situation like this?

Also, with the problem "fixed" via the "all on one line" method, the ":" spans are still slightly offset as they are not in the centre of their designated space, but are, for lack of a better term, aligned left inside their character or span space. (Pic 2)

The browser doesn't _ignore_ whitespace, instead it collapses it to a single space between inline (or inline-block) elements. — chazsolo, Mar 05 '19 at 17:06
But, as I said, it's weird because you can get rid of it by removing the white space in the HTML, something that is usually ignored by a browser. Also, no one seems to have addressed the characters being aligned left in their designated space. — Kelvin Aitken, Mar 07 '19 at 14:53
Well sure, if you remove the whitespace from the HTML then the browser wont render any. The character alignment is specific to the font you are using. — chazsolo, Mar 07 '19 at 16:25

score 1 · Answer 1 · answered Mar 05 '19 at 17:23

This issue comes up when 2 inline-block elements are next to each other. Think about when you add text to a h1 it respects the spacing between 2 words The word, but if you didnt add the space it would read theword.

In your case you moved the span to a new line which the browser collapse to a space

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

OK, that makes sense. I assume also that the ":", or any other letter, is aligned left, by default, in it's allotted space, not centred. — Kelvin Aitken, Mar 05 '19 at 18:49

Spacing of spans inside h2 weirdness

1 Answers1