Conflict between line-height and actual height when Italics are used

Question

I have the following problem:

I have a span element with line-height 18px and font-size 16px. This works great when the text inside is not italics; the span remains 18 pixels tall.

The problem arises when the text within the span is in italics or bold. For some reason, the height of the span element adds one pixel, and I get a 19 pixel tall span.

This problem is on firefox only. IE, Safari, Opera, and Chrome dont have this problem. The span remains 18 pixels tall no matter what.

has anybody had this problem before?

This is the offending 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 the other browsers if you wish. You'll notice the span elements are kept 18 pixels tall, as they should be kept according to line-height: 18px

Hinayana

Same issue with webkit. This looks interesting. – Ideologist

Answer 1

You can't adjust the line-height of an inline element. You need to float it, or set it to display: block or display: inline-block.

Erasme

Good catch. I can confirm that fixes it on webkit. – Corinacorine

Under the assumption that my problem is the same as the OPs: this doesn't fix it for me. My issue is similar - adding font-style:italic adds 1px to the calculated height, despite a line-height (correctly specified on a block-level ancestor) that is far bigger than the font-size. Only exhibits on Windows, but happens in all browsers. – Fiftyfifty

@AdamA Are the calculated heights the same with/without italics if the element itself is directly given display: block, or if an explicit height is declared? – Erasme

Sorry I'm so late responding. I would expect that an explicit height would fix the problem - it's only the calculated height that's odd. It's especially surprising because you can set the line-height much larger than the text, to the point where you wouldn't expect the size of the text to have any effect on the height of the element. But still, adding italics adds a pixel of height. – Fiftyfifty

Answer 2

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

The reason is that, by default, the div element inherits line-height from its parent, which happens to have 19px as the value (this depends on the font and on the browser). Setting line-height on an inner element just implies a lower limit on the actual line-height.

Thus, the solution is to set line-height on the enclosing block-level element (or to turn the span element to a block element in display, as suggested in another element).

Vassalage

Answer 3

I've come across this problem too. I think it's related to certain fonts (I've had it happen with Sorts Mill Goudy, for example) and how their italic characters are sized relative to their roman letters. The height of a line depends on the "content box" of the inline elements in it, and so larger italics can mess with the computed height of the line.

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

Of course, now your italics are subtly misaligned with respect to the body text! In the end, it's up to you as to whether this helps or not.

Remonaremonetize