Question

I have an inline element with a line break in it. It has padding on all sides. However, the side padding on where the line break cuts the element is not there.

This is what i mean:

http://jsfiddle.net/4Gs2E/

There should be 20px padding on the right of tag and left of with but there isnt.
The only other way I can see this working is if i create a new element for every line but this content will be dynamically generated and will not be in a fixed width container so i dont see that working out. Is there any other way I can do this in css without any javascript?

I want the final result to look like this :
http://jsfiddle.net/GNsw3/

but without any extra elements

i also need this to work with display inline only as I want the background to wrap around the text as inline block doesnt do this

Is this possible?

edit, altered the examples to make what i want more visible:

current
http://jsfiddle.net/4Gs2E/2/

what i want it to look like
http://jsfiddle.net/GNsw3/1/

Answer 1

In some cases you can use box-shadow for a workaround.

Move the right and left padding of the element to its parent and add two box-shadows.

The result: http://jsfiddle.net/FpLCt/1/

Browser support for box-shadow: http://caniuse.com/css-boxshadow

Update:

There is also a new css property for this issue called box-decoration-break. It is currently only supported by opera, but hopefully more browsers will implement this soon.

Hope this helps