What I want to do is stop the backgrounds of each line overlapping but ensure that the space between each line is the same.
The part in bold is a bit ambiguous;
- for the same vertical spacing between lines of text as is currently present, but with reduced height white highlights, reduce the top and bottom padding.
- for the same height white highlights as is currently present, but with further apart vertically spaced text, increase line-height.
I’ve played with line height and padding but can’t come up with a solution.
So I’m not sure where that fits in or what the picture illustrates.
If the pic illustrates what you want to achieve, i have to say that it already looks very much like the demo – with semi-transparent white background to the text (what I’ve called highlights above) and white overlap, but not so much to obscure text.
Can you clarify what it is you need help with exactly please.