CODEWITHSUNDEEP
firefoxhtmlcssitalics
Edsfault
Edsfault

Reputation: 71

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

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

Upvotes: 7

Views: 1996

Answers (3)

Keith
Keith

Reputation: 64

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.

Upvotes: 0

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201896

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).

Upvotes: 0

justisb
justisb

Reputation: 7290

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.

Upvotes: 4

Related Questions