How to have background around text, but white space in between lines? - html

Question

I'm trying to get text to have a background color, but have white space in between lines. I've managed to make it mostly work in Firefox and Explorer, but Safari and Chrome don't have space between lines. Here's how it looks in
Firefox:
But here's how it looks in Chrome:
To make it work in Firefox and IE, I had to add a span around the text inside the H2 tag, apply a background to that span, and add a second span inside that, which I positioned relative so that I could drop the text down to center it vertically inside the background color.
HTML:
<h2><span class="h2inner"><span class="h2inner2">Conflict of Interest Policy of A Better City, Inc.</span></span></h2>
CSS:
.h2inner {
padding: 4px 0 3px 0;
background-color: $h2color; }
.h2inner2 {
position: relative;
top:5px;}
Ideally, I'd also like padding at the beginning and end of each line's block of color, but I can only getting padding at the start and end of the entire head, not in the middle where it breaks onto a new line.
Any ideas?

Answer 1

You can adjust line-height for line spacing and for left and right padding on each line you can use white-space: pre-wrap and one inner span with left position
h2 {
width: 400px;
font-size: 30px;
font-weight: bold;
text-transform: uppercase;
color: white;
line-height: 1.3em;
}
span {
background-color: #F07317;
white-space: pre-wrap;
padding-right: 10px;
}
span span {
position: relative;
left: 10px;
}
<h2><span><span>Conflict of Interest Policy of A Better City, Inc.</span></span></h2>