CSS3 Examples

CSS LINE HEIGHT

Written by jon on 9:28 AM This property specifies the height of an in-line element box. If the ‘line-height’ value is greater than the value of the ‘font-size’ for the element, this difference (called the “leading”) is cut in half (called the “half-leading”) and distributed evenly on the top and bottom of the in-line box. In this manner, the content of an in-line element box is centered within the line-box (assuming no ‘vertical-align’ property is also set to change this behavior.) Negative values for this property are not allowed. This property is also a component of the ‘font’ shorthand property.

A few other rules govern line-height calculation:

• If the computed value for the ‘line-height’ property is less than the computed ‘font-size’ for an in-line element box, fonts may ‘bleed’ (overflow) the element box.
• If this property is set for a block-level element box that contains in-line elements, the value specifies the minimal height of each of the in-line boxes.
• For in-line element boxed, this property specifies the height of the boxes generated by the element.
• For in-line replaced elements the height of the element box is given by the ‘height’ property instead of the ‘line-height’ property.
• If an element box contains text in more than one font-size, the ‘line-height’ property should be determined using the largest font-size. This helps to create consistent baselines between adjacent line boxes.

Example

div.test { line-height: 160%; font-size: 10pt } <div style=”line-height: 160%; font-size: 10pt”>content</div>

Possible Values

Value Description inherit Explicitly sets the value of this property to that of the parent. normal Sets the line height to a ‘reasonable' value relative to the element's font face. Browser dependent results. CSS2 recommends a computed value between 1.0 and 1.2. [number] This number is a multiplier to determine the line height as a factor of the current element font-size. To determine the line height from the [number], multiply the current element font-size by the [number]. Child elements will inherit the multiplying factor. Negative values are not allowed. [length] This sets the ‘line-height' to an explicit length value. Negative values are not allowed. [percentage] This number is also a multiplier (like [number]) used to determine the line height as a factor of the current element font-size. To determine the line height from the [percentage], multiply the current element computed ‘font-size' by the [percentage]. Negative values are not allowed.