CSS: highlighted text effect

Question

I'm trying to produce a highlighted text effect with a bit of padding, but the padding is only applied to the beginning and end, not new lines.

#highlight {
background: rgba(255,230,0,0.5);
padding: 3px 5px;
margin: -3px -5px;
line-height: 1.7;
border-radius: 3px;
}

<span id=highlight>text<br>here</span>

Please see here: http://jsfiddle.net/CNJZK/7/

Are there any pure-CSS fixes to get the internal ("sharp") edges to extend a bit farther? i.e. like in this image: http://i.imgur.com/j8mIJZS.jpg

Answer 1

Try setting the display on your span to inline-block:

#highlight {
    background: rgba(255, 230, 0, 0.5);
    padding: 3px 5px;
    margin: -3px -5px;
    line-height: 1.7;
    border-radius: 3px;
    display:inline-block;
}

jsFiddle example