CSS LINE HEIGHT
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:
|
|
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. |
I have to say, that I could not agree with you in 100%, but that’s just my IMHO, which could be wrong.
p.s. You have an awesome template for your blog. Where did you find it?
do you have any good examples of line-height used to produce clean and easy to read paragraphs? I want to see some examples