XHTML / CSS Padding for Inline Line Break Element

Question

I have an inline element with a line break in it. It has a gasket on all sides. However, side padding where line breaks crop an element does not exist.

Here is what I mean:

http://jsfiddle.net/4Gs2E/

On the right side of the tag There should be a 20px addition, but to the left of c , but does not exist. The only other way I can see this is to create a new element for each row, but this content will be dynamically generated and will not be in a container with a fixed width, so I don’t see that this works. Is there any other way to do this in css without javascript?

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

but without any additional elements

I also need this to work with inline rendering only, since I want the background to wrap around the text, since the inline block does not

Is it possible?

modify, modify examples to make what I want more visible:

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

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

Answer 1

In some cases, you can use box-shadowfor a workaround.

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

Result: http://jsfiddle.net/FpLCt/1/

box-shadow: http://caniuse.com/css-boxshadow

Update:

css , box-decoration-break. , , , .

,

Answer 2

, :)

<br> css, javascript. , , jQuery:

// Add two spaces before and after any <br /> tag
$('br').replaceWith('&nbsp;&nbsp;<br />&nbsp;&nbsp;');

 , .

- Fiddle: http://jsfiddle.net/4Gs2E/8/

Answer 3

, float: left display: inline:

http://jsfiddle.net/GolezTrol/4Gs2E/1/

Answer 4

SPAN, .

Answer 5

css- . , , , INLINE-BLOCK ( , css, ) . , div.

div.menuopt {
    margin: 10px;
    padding: 0px;
    padding-left: 0px;
    overflow: hidden;
    width: 500px;
    height: 150px;
    background: grey;
}
span.menuopt {
    display: inline-block;
    margin: 0px;
    padding: 0px;
    margin-left: 150px;
    margin-top: 10px;
    font-size: 25px;
}

: http://jsfiddle.net/ApbQS/

, -