求助：消除div相对定位后遗留空白的CSS技巧

你遇到的问题根源很明确：使用position: relative移动元素时，元素在文档流中的原始占位空间不会消失，只是视觉上挪了位置，所以原来的地方就留下了空白。下面给你几个实用的解决办法：

方法1：改用绝对定位（推荐） #

绝对定位的元素会完全脱离文档流，不会占用任何原始空间，配合父元素的相对定位就能精准控制位置。同时把div换成span更符合行内文本的语义：

修改后的代码 #

HTML：

<br/>
<div class="line">Empty <span class="chord">Bm</span> spaces, what are we living for?</div>
<br/>
<div class="line">Abandoned <span class="chord">G</span> places, I guess we know the score</div>

CSS：

.line {
  /* 给父元素设置相对定位，让子元素的绝对定位以它为参照 */
  position: relative;
  margin: 1.5em 0; /* 给和弦留出上方空间 */
}
.chord {
  color: orangered;
  font-weight: bold;
  position: absolute;
  top: -20px; /* 向上偏移 */
  left: 45px; /* 调整到对应文本的上方位置 */
}

方法2：用inline-block+负margin #

把元素设为inline-block后，用负margin调整位置，同时抵消原始占位：

修改后的CSS #

.chord {
  color: orangered;
  font-weight: bold;
  display: inline-block;
  margin-top: -20px; /* 向上偏移，同时减少占位高度 */
  margin-left: 20px;
  vertical-align: top; /* 避免和文本基线对齐导致的错位 */
}

这个方法不需要修改HTML结构，但要注意inline-block的垂直对齐问题，需要配合vertical-align调整。

方法3：浮动元素 #

利用浮动脱离文档流的特性，同样可以消除占位空白：

修改后的CSS #

.chord {
  color: orangered;
  font-weight: bold;
  float: left;
  margin-top: -20px;
  margin-left: 20px;
}

注意：如果使用浮动，要确保后续文本不会被环绕，必要时可以给行容器添加overflow: hidden来清除浮动影响。

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