计算跨度的scrollWidth，offsetWidth，clientWidth

Question

Element.scrollWidth只读属性是对元素内容宽度的度量，包括由于溢出而无法在屏幕上显示的内容。SO中的帖子详细介绍了scrollWidth，offsetWidth，clientWidth

an introduction on scrollWidth,offsetWidth,clientWidth in detail

边框，填充，边距全部设置为零，并且在示例中隐藏了溢出，在imgbox1中，图像之间有空白，而在imgbox2中没有空白。在firefox中单击Run code snippet。

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>

我们得到了输出

span1.scrollWidth 39 
span2.scrollWidth 10

如何解释scrollWidth中的span1是39px而scrollWidth中的span2是10px？为什么scrollWidth中的span1不是40像素。

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>

我们得到输出：

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

请指出它们之间的1像素差（943-942）在哪里。

Answer 1

之所以在“ imgbox1”处的图像之间留有空格，是因为元素之间有空格（换行符和一些制表符都被视为一个空格，为了清楚起见）。

但是在另一个“ imgbox2”上没有空格，因为图像之间没有换行。

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

Answer 2

这是由于您试图将span标记用作容器这一事实。由于它是默认的display: inline-block。它所应用的计算方法与您在图片中显示的方法不同。图片描述了display: block;元素的所有宽度。

每个显示为自己的宽度规则。极端的是，如果您应用display: none;，则不能期望与图像中的规则相同。

因此设置display: block并遵守规则：

span{
  display: block;
}

无论如何你都不会有问题。

演示：

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, '\n', "imgbox.scrollWidth - imgbox.clientWidth " + (imgbox.scrollWidth - imgbox.clientWidth));
}

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

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

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