防止两个跨度元素重叠

Question

我正在尝试减少两个 span 标签之间的 line-height，使它们看起来靠得更近，但问题是这样做会与不透明度重叠。有什么方法可以保持不透明度一致，或者我可以采用另一种方法来调整行高而不重叠不透明度？

<div style="text-align:left; font-size: 20vh; color:white; line-height: 18.2vh; padding: 5vw; margin-bottom:-15px;">
  <span style="background-color:rgba(0, 0, 0, .5);">
      &nbsp;MY NAME
  </span>
  <br/>
  <span style="background-color:rgba(0, 0, 0, .5);">
      &nbsp;IS ABCD&nbsp;
  </span>
</div>

Answer 1

您应该能够将两个 span 样式位置都更改为绝对位置以获得您想要的结果。

请看下面：

<div style="text-align:left; font-size: 20vh; color:white; line-height: 18.2vh; padding: 5vw; margin-bottom:-15px;">
        <span style="background-color:rgba(0, 0, 0, .5); position: absolute">
            &nbsp;MY NAME
        </span>
        <br/>
        <span style="background-color:rgba(0, 0, 0, .5); position: absolute">
            &nbsp;IS ABCD&nbsp;
        </span>
    </div>

Answer 2

尝试将 span 设置为 display: inline-block; 并根据需要使用 padding 作为间距。

<div style="text-align:left; font-size: 20vh; color:white; line-height: 18.2vh; padding: 5vw; margin-bottom:-15px;">
  <span style="background-color:rgba(0, 0, 0, .5); padding: 10px 10px 0 10px; display: inline-block;">MY NAME</span>
  <br/>
  <span style="background-color:rgba(0, 0, 0, .5); padding: 0 10px 10px 10px; display: inline-block;">IS ABCD</span>
</div>

此外，您可能对 -

感兴趣

防止两个跨度元素重叠

Prevent overlapping of two span elements

html

css

opacity