css - Make background as tall as the tallest child element -

is on our site, and font size and background color Buttons do not play well together.

Suppose we have this lesson:

  Fu bar falcon  

When the user applies to the background for the whole color The color of, and then the larger font size applies to "bar", this HTML is generated ():

The result is not being completely covered with "bar" background:

I open display: inline-block to the external span ():

& lt; Span style = "background-color: yellow; display: inline-block" & gt; Foo & Lt; Period style = "font-size: 30px" & gt; Bar & lt; / Span & gt; Falcon & lt; / Span & gt;

Unfortunately, highlighting this change In other cases with background color broke.

with display: inline-block ():

without ():

< / P>

with display: inline-block ():

without ():

< / P>

So, my question is, how can I decide the background of large text without using display: inline-block ?

/ div>

I think in this case you need to add background color: yellow; To Internal

This is not the line at the same height but, it is the most logical way to solve this problem. Because you do not want to make all the lines in the same height.