Image captioning issue - html

Question

h2 span.spacer {
padding:0 5px;
}
h2 span {
color: white;
font: bold 24px/45px Helvetica, Sans-Serif;
letter-spacing: -1px;
background: rgb(0, 0, 0); /* fallback color */
background: rgba(0, 0, 0, 0.7);
padding: 10px;
}
h2 {
position: absolute;
top: 50px;
left: 0;
}
<h2><span>This is the first line.<span class="spacer"></span><br/><span class="spacer"></span>This is the second line.</span></h2>
Grettings!
So I've developed a funky way of captioning an image as illustrated in the code below. However, as you can see, there are black blocks at the end of the first line and the beginning of the second line which are a darker colour, including the space between the two lines.
Is there any way in which this can be resolved?
Thanks.
h2 span.spacer {
padding:0 5px;
}
h2 span {
color: white;
font: bold 24px/45px Helvetica, Sans-Serif;
letter-spacing: -1px;
background: rgb(0, 0, 0); /* fallback color */
background: rgba(0, 0, 0, 0.7);
padding: 10px;
}
h2 {
position: absolute;
top: 50px;
left: 0;
}
<h2><span>This is the first line.<span class="spacer"></span><br/><span class="spacer"></span>This is the second line.</span></h2>

Answer 1

Like this?
h2 span.spacer {
padding:0 5px;
}
h2 span {
color: white;
font: bold 24px/45px Helvetica, Sans-Serif;
letter-spacing: -1px;
background: rgb(0, 0, 0); /* fallback color */
background: rgba(0, 0, 0, 0.7);
padding: 10px;
display: inline-block;
}
h2 {
position: absolute;
top: 50px;
left: 0;
}
<h2><span>This is the first line.<span class="spacer"></span><br/><span class="spacer"></span>This is the second line.</span></h2>

Answer 2

try this
h2 span.spacer {
}
h2 span {
color: white;
font: bold 24px/45px Helvetica, Sans-Serif;
letter-spacing: -1px;
background: rgb(0, 0, 0); /* fallback color */
background: rgba(0, 0, 0, 0.7);
padding: 10px;
}
h2 {
position: absolute;
top: 80px;
left: 0;
}
<h2><span>This is the first line.</span><br/><span>This is the second line.</span></h2>

Answer 3

UPDATE: Removed line between two spans
This, right? Not sure what's happening, when I post this, it shows only plain HTML :/ Hope you're seeing it properly though.
h2 span {
color: white;
font: bold 24px/45px Helvetica, Sans-Serif;
letter-spacing: -1px;
background: rgb(0, 0, 0); /* fallback color */
background: rgba(0, 0, 0, 0.7);
padding: 9px 10px;
}
h2 {
position: absolute;
top: 50px;
left: 0;
}
<h2><span>This is the first line.</span><br/><span>This is the second line.</span></h2>
Result:
Hope it helps!