Предотвращение перекрытия двух элементов span

Question

Я пытаюсь уменьшить line-height между двумя тегами 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);"> 
 
     &nbsp;MY NAME 
 
    </span> 
 
    <br/> 
 
    <span style="background-color:rgba(0, 0, 0, .5);"> 
 
     &nbsp;IS ABCD&nbsp; 
 
    </span> 
 
</div>

Answer 1

Вы просто должны быть в состоянии изменить оба положение пролетов стиля, чтобы абсолютный, чтобы получить результаты, которые вы хотите.

Пожалуйста, смотрите ниже:

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

Кроме того, вы можете быть заинтересованы в - How to apply padding to every line in multi-line text?