Do not inherit row height in nested elements

Question

In any case, so that the span with font-size: 12px does not inherit the height of the span line with font-size:18px ? I want a line height value of 1.5 for 18px and 1.5 for 12px. I can not separate both span

http://jsfiddle.net/WPzVs/6/

Answer 1

This should work in Opera:

 .example { font-family: Arial; font-size: 12px; } .example, .example * { line-height: 1.5em; } 

---

For Firefox or IE, adding the following rule will result in a different line height for each element, but will break the text stream:

 .example * { display:inline-block; } 

Answer 2

Write like this:

 <p> <span></span> <span></span> </p> 

Instead of this:

 <p> <span> <span></span> </span> </p> 

Check out http://jsfiddle.net/WPzVs/8/

Answer 3

I do not think you want. Although the height of the line in the inner div is less than in the outer div, it is still external, which determines the height.

And even if smaller text runs over several lines, it is still within the range with a larger line height on each of these lines.

Good question; I have supported.