Inline text - background color with padding

css, html

Solution

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

Problem

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.

Original source