防止两个跨度元素重叠

我试图减少两个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>

来源

2017-02-19 RizJa

你应该只能够改变两者的跨度风格位置的绝对得到你想要的结果。

请参阅以下内容：

<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>

来源

2017-02-19 03:49:51

注意，位置绝对会影响到内容流https://jsfiddle.net/2365px9q/ – Stickers

是，Pangloss使得伟大的一点！您当然必须解决您当前的需求，以确保此解决方案是适当的。 –

感谢您指出@Pangloss。幸运的是，在我的情况下，这个内容是跨页面大部分的图像的顶部，所以它是我完成工作的最干净的方式。 – RizJa

尝试根据需要设置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>

此外，您可能会感兴趣 - How to apply padding to every line in multi-line text?

来源

2017-02-19 04:07:10 Stickers

防止两个跨度元素重叠

回答

相关问题