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

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.