Conflict between line height and actual height when using italics

Question

I have the following problem:

I have a span element with a string size of 18px and a font size of 16px. This works great when the text inside is not italic; the range remains 18 pixels.

A problem occurs when text within a range is shown in italics or bold. For some reason, the height of the span element adds one pixel, and I get a height of 19 pixels.

This issue only applies to firefox. IE, Safari, Opera and Chrome do not have this problem. The span remains 18-inch, no matter what.

Has anyone had this problem before?

This is the violation code:

span { font-size : 18px ; line-height : 18px ; } span.italicSpan { font-style : italic; } 

There is an example here:

http://edincanada.co.cc/test/shjs-0.6/test7.html

Please check other browsers if you want. You will notice that the span elements are 18 pixels high, as they should be stored according to the line height: 18px

Answer 1

You cannot adjust the line height of an inline element. You need to swim or set it to display: block or display: inline-block .

Answer 2

As far as I can (viewing the example page on Firefox 8 with Firebug installed), the problem exists for the first div element.

The reason is that, by default, the div element inherits the height of the line from its parent, which has a value of 19px as the value (this depends on the font and browser). Setting the line height on the inner element only means the lower limit of the actual line height.

Thus, the solution is to set the row height at the spanning block level (or include a span element in a block element on the display, as suggested in another element).

Answer 3

I also ran into this problem. I think this is due to certain fonts (I would have happened with Sorts Mill Goudy , for example) and how their italic characters are sized relative to their Roman letters. The height of the line depends on the “ content block ” of the built-in elements in it, and therefore a larger italic may go bad with the calculated height of the line.

The only reliable solution I found (other than using a different font) is to reproduce using the vertical-align property of italics. When the body text is aligned with baseline , I found that the vertical alignment of italics to the top or bottom line sorts things.

Of course, now your italics are subtly shifted relative to the main text! In the end, it depends on whether it helps or not.