Calculate the value of span's scrollWidth,offsetWidth,clientWidth

The Element.scrollWidth read-only property is a measurement of the width of an element’s content, including content not visible on the screen due to overflow.The post in SO had an introduction on scrollWidth,offsetWidth,clientWidth in detail

an introduction on scrollWidth,offsetWidth,clientWidth in detail

Border ,padding ,margin all set to zero and overflow is hidden in the example,in imgbox1 there is a white space between images,no white space in imgbox2.Click Run code snippet in firefox.

var imgbox1 = document.getElementById("imgbox1");
imgbox1.innerHTML += imgbox1.innerHTML;
var span1 = document.getElementById("span1");
console.log("span1.scrollWidth " + span1.scrollWidth);
var imgbox2 = document.getElementById("imgbox2");
imgbox2.innerHTML += imgbox2.innerHTML;
var span2 = document.getElementById("span2");
console.log("span2.scrollWidth " + span2.scrollWidth);

* {
  padding: 0px;
  margin: 0px;
  border: 0px;
}

div {
  border: 0px;
  width: 933px;
  height: 129px;
  overflow: hidden;
  white-space: nowrap;
}

<div id="imgbox1">
  <span id="span1">
        <a href=""><img src="https://i.stack.imgur.com/b7J9w.jpg" alt=""></a>
        <a href=""><img src="https://i.stack.imgur.com/yh7YJ.jpg" alt=""></a>
        <a href=""><img src="https://i.stack.imgur.com/5uIog.jpg" alt=""></a>
        <a href=""><img src="https://i.stack.imgur.com/r5GCW.jpg" alt=""></a>
    </span>
</div>
<br>
<div id="imgbox2">
  <span id="span2"><a href=""><img src="https://i.stack.imgur.com/b7J9w.jpg" alt=""></a><a href=""><img src="https://i.stack.imgur.com/yh7YJ.jpg" alt=""></a><a href=""><img src="https://i.stack.imgur.com/5uIog.jpg" alt=""></a><a href=""><img src="https://i.stack.imgur.com/r5GCW.jpg" alt=""></a>
    </span>
</div>

We got the output

span1.scrollWidth 39 
span2.scrollWidth 10

How to explain the scrollWidth in span1 is 39px while scrollWidth in span2 is 10px？Why the scrollWidth in span1 is not 40px.

window.onload = function() {
  var imgbox = document.getElementById("imgbox");
  imgbox.innerHTML += imgbox.innerHTML;
  var span = imgbox.getElementsByTagName("span");
  console.log("span[0].offsetWidth " + span[0].offsetWidth);
  console.log("imgbox.scrollWidth - imgbox.clientWidth " + (imgbox.scrollWidth - imgbox.clientWidth));
}

* {
  border: 0px;
  margin: 0px;
  padding: 0px;
}

div {
  width: 933px;
  height: 129px;
  overflow: hidden;
  white-space: nowrap;
}

<div id="imgbox">
  <span>
        <a href=""><img src="https://i.stack.imgur.com/b7J9w.jpg" alt=""></a>
        <a href=""><img src="https://i.stack.imgur.com/yh7YJ.jpg" alt=""></a>
        <a href=""><img src="https://i.stack.imgur.com/5uIog.jpg" alt=""></a>
        <a href=""><img src="https://i.stack.imgur.com/r5GCW.jpg" alt=""></a>
    </span>
</div>

We get the output:

span[0].offsetWidth 943 
imgbox.scrollWidth - imgbox.clientWidth 942

Please point out where is the 1 px difference (943-942) between them.

from Calculate the value of span's scrollWidth,offsetWidth,clientWidth