如何仅修改span样式使相邻行span背景色填充行间隙？

可以仅通过修改<span>的样式来填充间隙，以下是几种实用方案，均能适配font-size和line-height的动态变化：

方案1：动态计算内边距 + 背景拆分渲染（推荐） #

利用CSS变量和calc()动态计算上下内边距，结合box-decoration-break让背景覆盖整个行盒：

html {
  --base-line-height: 1.5;
  line-height: var(--base-line-height);
}

span {
  background-color: red;
  /* 根据行高与字体大小的差值计算上下内边距，自动适配变化 */
  padding: calc((var(--base-line-height) - 1) * 0.5em) 0;
  /* 让行内元素的背景在每行都完整渲染 */
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone; /* 兼容Chrome/Safari */
}

原理：calc((var(--base-line-height) - 1) * 0.5em)会自动算出line-height超出字体高度的部分，平均分配给上下内边距，再通过box-decoration-break: clone让背景延伸至整个行盒高度，彻底消除间隙。

方案2：转为行内块元素填充整行高 #

将<span>设为inline-block，直接匹配父元素的行高：

html {
  --base-line-height: 1.5;
  line-height: var(--base-line-height);
}

span {
  background-color: red;
  display: inline-block;
  height: calc(var(--base-line-height) * 1em);
  vertical-align: middle;
  /* 若需要背景占满整行，添加下面一行 */
  /* width: 100%; */
}

原理：inline-block元素的高度可以直接设置为行高值，配合vertical-align: middle保证文字居中，背景会填充整个元素高度，从而覆盖行盒的间隙。

方案3：继承行高 + 负外边距（兼容旧浏览器） #

如果需要兼容不支持box-decoration-break的旧浏览器，可使用此方法：

html {
  --base-line-height: 1.5;
  line-height: var(--base-line-height);
}

span {
  background-color: red;
  line-height: inherit;
  /* 上下内边距填充行高空隙，负外边距抵消行高增加的空间 */
  padding: calc((var(--base-line-height) - 1) * 0.5em) 0;
  margin: calc(-(var(--base-line-height) - 1) * 0.5em) 0;
}

原理：通过内边距让背景覆盖行高区域，再用负外边距避免行盒高度被额外撑开，保证整体布局不变。

内容的提问来源于stack exchange，提问作者user200783