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:
– 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
}
Possible Values
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.
5 Responses
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
I have tried this with Divs and have had no luck. I works fine in the paragraph tags, but I cant get it to work on Divs. Any idea?
what if i have a inline-block element inside a paragraph and i want to line height of that line not of all general lines in that paragraph.
[…] File Name : Css line height – css3.com – a comprehensive css 3 Source : http://www.css3.com Download : Css line height – css3.com – a comprehensive css 3 […]