如何用CSS消除div包裹的span元素之间的多余空白间距

相同内容下div高度高于span的成因 #

两者的默认显示类型差异是核心原因：

• div是块级元素，默认display: block，高度计算遵循块级盒规则：会基于默认的line-height（大部分浏览器默认值为normal，相当于1.2倍左右的当前字体大小）计算整行高度，包含文字上下的半行距留白。
• span是行内非替换元素，默认display: inline，getBoundingClientRect()统计的高度仅包含文字实际渲染的内容区域高度，行高带来的上下留白不会被计入span自身的高度统计，因此数值会比相同内容的div更小。

你遇到的span之间的间距，本质就是每个包裹span的div，因为行高规则多出了上下留白，上下div的留白叠加就形成了span之间的多余间隙。

消除多余间距的CSS方案 #

你可以根据业务场景选任意一种：

1. 统一行高规则
   给div设置行高为0，再给span指定实际需要的行高：

div {
  line-height: 0;
}
span {
  background: green;
  line-height: 1; /* 可根据需要调整为合适的行高值 */
}

2. 修改span的显示类型
   把span改为块级元素，让它的高度计算规则和div对齐，自动撑满整个div：

span {
  background: green;
  display: block;
}

3. 清除字体大小带来的基线偏移
   给div设置字体大小为0，再单独给span恢复正常字体大小，消除行盒的基线留白：

div {
  font-size: 0;
}
span {
  background: green;
  font-size: 16px; /* 替换为你实际需要的字体大小 */
}

内容的提问来源于stack exchange，提问作者Book Of Flames