css - 跨度下方无法解释的空间

Question

我需要摆脱两个span标签下方的空间，并且不明白是什么导致它们在那里。

HTML

<div>
  <span></span><span></span>
</div>

CSS

div {
  border: 1px solid gray;
  display: inline-block;
}
span {
  width: 13px;
  height: 25px;
  display: inline-block;
}
span:not(:last-child) {
  border-right: 1px solid gray;
}

截屏：

https://jsfiddle.net/wjy5hxnu/

标签： css

Answer 1

您可以在此处查看更新的 jsfiddle 。

div {
  font-size: 0px;
}

添加font-size: 0到div将解决问题，如果您必须使用跨度内的任何文本，您可以直接在跨度中添加字体大小。