防止兩個跨度元素重疊

我試圖減少兩個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

防止兩個跨度元素重疊

回答

相關問題