Inline text - fill background color

Question

I need to make a title with a background color that is not a block (only text-bg color).

Here is an image of what I need to archive:

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

You can see that the indentation is wrong, and I could not figure out how to set it. When you play with the add-on, you will see that it will overlap, and the second line will not pass as the first.

I am glad to every hint!

Decision:

John Smith made a working example: http://jsbin.com/tiwuquze/21/edit He used box-shadowto emulate the left-hand add-on.

Answer 1

UPDATE , : 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 */

}

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

Answer 2

:

line-height:24px;
padding:4px; 

Answer 3

, @ReKnawn , , + padding x 2, . , 16, - 4 , 24,

Answer 4

:

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

h1.