How to add horizontal padding to every line in one multi-line wrapped sentence?

Question

This is my code:

<div><p><span>... highlighted text ...</span></p><p>Chapter info</p></div>

This is what it currently looks like:

http://i48.tinypic.com/2dqvo1i.png

Is there a way to add padding to the sides of the highlighted text? Regular padding on the SPAN doesn't work, because it only takes into account the the beginning and end of the sentence, not every line separately.

Any ideas? CSS3 code is fine.

Answer 1

Just pad the "p" tags that surround the spans. The "p" tag (unlike span) is a block-level element, so padding on the top, bottom, or sides will work as expected.

Answer 2

Try inline-block. It won't work in anything older than IE8 (though there are some work arounds), but everything else popular should be fine:

p span {
    display: inline-block;
    padding: 0 2em;
}