<span> background with font size

Question

in site bbcode text background and size output like this

<span style="background: #ff0000;">

text size normal

<br></br>
<br></br>
<span style="font-size: 250%">

    text size big

</span>
<br></br>
<br></br>

</span>

the problem is background will not fit text size

http://jsfiddle.net/fr3wA/

http://img11.imageshack.us/img11/7199/sdpm.png

if I make the span inline block , the background color will be on the whole box

http://img31.imageshack.us/img31/323/d3t5.png

I know the background color will fit the text if I put the style in like this

<span style="background: #ff0000;">

text size normal

<br></br>
<br></br>
<span style="style="background: #ff0000;"font-size: 250%">

    text size big

</span>
<br></br>
<br></br>

</span>

my problem is the code generated from php bbcode and the user sometime choose background color before text size

Answer 1

Just inherit the background from the previous span

<span style="background: #ff0000;">

text size normal

<br /><br />
<br /><br />
<span style="font-size: 250%; background: inherit;"> <!-- inherit the background -->

    text size big

</span>
<br /><br />
<br /><br />

Check out how it works here: http://jsfiddle.net/fr3wA/3/