Empêcher le chevauchement de deux éléments de travée

Question

J'essaie de réduire le line-height entre deux étiquettes span afin qu'elles semblent plus rapprochées mais le problème est que cela fait chevaucher l'opacité. Y at-il un moyen de garder l'opacité cohérente ou y a-t-il une autre approche que je peux prendre pour ajuster la hauteur de la ligne sans que l'opacité ne se chevauche?

<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

Vous devriez juste être en mesure de changer à la fois de la position de style portées à absolu pour obtenir les résultats que vous désirez.

S'il vous plaît voir ci-dessous:

<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

Essayez de régler le span-display: inline-block; et en utilisant padding pour un espacement selon les besoins.

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

En outre, vous pourriez être intéressé par - How to apply padding to every line in multi-line text?