Sunday, September 28, 2008

Font Size Inheritance

The css property font-size is an inherited property. That is, the font size of an element is inherited from ancestor properties.
When using relative-size length values, the computed value may be a non-integral number. This value is rounded off to give the actual displayed font size. However, it is the computed non-integral value that is inherited by descendant elements.
Example: <p style="font-size:15px">Some text <span style="font-size:1.5em"> span text</span>
The computed size for the text in the span is 22.5px . This is rounded-off by the browser to 23px. The font size that is inherited by elements is the computed size not the rounded-off size.
Example: <p style="font-size:15px">Some text <span style="font-size:1.5em"> span text <span "font-size:1.2em">nested span text</span></span></p>
The computed font size for the text in the outer span is 22.5px and the actual font size is the rounded-off figure of 23px. The inherited font size of the inner span is 22.5px and the computed font size is 27px.

No comments: