Inline text - background color with padding

Question

I need to make a Headline with background color which is not a block(only the text-bg is colored).

Here is an image of what I have to archieve:

And here is what I've got so far: http://jsbin.com/tiwuquze/1/edit

You can see the padding is not right and I couldn't figure how to set it. When you play around with the padding, you will see that it will overlap and the second line is not going in like the first one.

I am happy about every hint!

Solution:

John Smith made a working example: http://jsbin.com/tiwuquze/21/edit He used box-shadow to emulate the left padding.

Answer 1

UPDATE got the solution, use box shadow :D

h1 {
    background-color: #FE8020;
    color: #FFFFFF;
    display:inline;
    white-space:pre-wrap;
    line-height : 24px;
    font-size: 18px;
    font-family:arial, sans-serif;
    padding: 5px;
    padding-left:0px;
    box-shadow: -16px 0 0 #FE8020; /* box shadow is emulating padding liek a charme */

}

for me this looks good

http://jsbin.com/tiwuquze/21/edit