去除定位 div 后留下的空白

Question

我正在尝试将一个非常基本的 div 与一些文本内联。 当我移动 div 时，它会留下我无法删除的空白。你愿意用一些 CSS 技巧来指导我吗？

.chord {
  color: orangered;
  font-weight: bold;
  display: inline;
  position: relative;
  top: -20px;
  left: 20px;
}

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

Fiddle，以防你想玩它。

https://jsfiddle.net/rondolfo/r3dphgsL/11/

我确实搜索了答案但找不到，但我相信这对于精通 css 的人来说是一个非常基本的问题。

Answer 1

使用 inline-flex 而不是 inline，将宽度设置为 0。这样会删除空格，但仍然显示和弦文本。您还可以删除左调整并在 div 之前添加一个空格。

.chord{
    color: orangered;
    font-weight: bold;
    display: inline-flex;
    position: relative;
    top: -20px;
    width: 0px;
}

Answer 2

设置一些类以像以前一样使用元素并相应地定位它们。您甚至可以为每个和弦制作一个，如下所示。

.chord{
position: relative;
}
.chord:before{
color: orangered;
font-weight: bold;
display: block;
position: absolute;
content: "";
top: -20px;
}
.chord.b-minor:before {
content: "Bm";
}
.chord.g:before {
content: "G";
}

<br />
Empty <span class="chord b-minor"></span> spaces, what are we living for?<br/><br/> Abandoned<span class="chord g"></span> places, I guess we know the score <br/>