span标签与section、footer元素间出现不明空白的成因求解

问题原因与修复方案 #

1. main内.main-col span 与section之间的空白 #

这个间隙是相对定位的特性导致的：
position: relative仅偏移元素的视觉渲染位置，不会释放元素原本在文档流中占据的空间。你给.main-col设置了bottom: 18px让元素向上偏移了18px，但它原本位置下方的18px空白仍然保留，挤压了后续的h3和section元素，产生多余间隙。
修复方式：
如果要保持span贴在main边框左上角的视觉效果，将相对定位改为绝对定位，同时给main添加相对定位作为父级参照物：

main {
  position: relative; /* 新增 */
  padding: 1rem;
  border: solid 0.1rem green;
}

span.main-col {
  position: absolute; /* 替换原有的relative */
  top: 0;
  left: 0;
  transform: translate(-17px, -18px); /* 替换原有的bottom、right属性，效果一致 */
  background-color: green;
}

2. section内.sec-col span与section顶部的空白、footer内.foot-col span与footer顶部的空白 #

这两处间隙的产生原因一致，都是行内元素默认渲染规则导致：

• span为行内元素，默认vertical-align: baseline（基线对齐）
• section、footer作为块级容器，继承了全局默认的line-height（通常为字体大小的1.2倍）
• 行内元素在块级容器中渲染时，行框会根据行高预留上下间隙，基线对齐规则也会让元素顶部和容器顶部产生错位。
  修复方式二选一即可：

方案A：调整span的显示与对齐规则

span.sec-col, span.foot-col {
  display: inline-block;
  vertical-align: top;
}

方案B：调整父容器与span的行高

section, footer {
  line-height: 0;
}
span.sec-col, span.foot-col {
  line-height: 1.5; /* 可根据视觉需求调整数值 */
}

可选优化 #

h3标签默认带上下外边距，也会放大元素间隙，如果需要可以手动重置：

h3 {
  margin: 1rem 0; /* 替换默认的1em上下边距，可自定义数值 */
}

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