Definition

The line-height property sets the distance between lines.

Syntax: line-height: ;

Inherited: Yes
Media: Visual
Applies to: All elements

Note: Negative values are not allowed.
JavaScript Syntax

CSS properties can also be dynamically changed with a JavaScript.

Scripting Syntax: object.style.lineHeight="2"

Possible Values

Value Description

normal Default. Sets a reasonable distance between lines
number Sets a number that will be multiplied with the current font-size to set the distance between the lines
length Sets a fixed distance between the lines
% Sets a distance between the lines in % of the current font size

CSS Property Description

CSS line-height is similar to leading in desktop publishing - it determines the "line height". This gives the impression of lines of text being closer together or further apart. Changing the line height in conjunction with using the letter-spacing, word-spacing, float properties can produce some nice looking layouts.

The line-height property will accept a value to control the spacing between baselines of text. When the value is a number, the line height is calculated by multiplying the element's font size by the number. Percentage values are relative to the element's font size. Negative values are not permitted.

Line height may also be given in the font property along with a font size.
If you make the value larger than the font-size (FontSize) then it will look like the lines are moving further away. Set it smaller, and the lines will start to overlap.

The line-height property could be used to double space text:

P { line-height: 200% }

Setting font-size and line-height at the same time

Example:

font: 12px/1.4 sans-serif;

This will set font-size to 12px, line-height to 1.4 and font-family to sans-serif.

font-size always comes first, line-height comes second:

font-size/line-height

NB: The font-family part is neccessary.

.

CSS Browser Support

Internet Explorer 3+
Netscape 4+
Opera 3.6+
W3C's CSS Level 1+

Example

p
{
line-height: 1.4
}

p
{
line-height: 14pt
}

p
{
line-height: 140%
}

CSS Bugs / Problems

Microsoft Internet Explorer 3.x incorrectly treats number values and values with em or ex units as pixel values. This bug can easily make pages unreadable, and so authors should avoid provoking it wherever possible; pixels units are often a good choice (more...).

For some reason, Opera 4 will 'inherit' inline absolute (as well as pixels) line height declarations back up to the previous line. Thus if you specify line-height: 200px on an inline element, it will also affect text on the previous and following lines.

Sources:

http://www.w3schools.com/css/pr_dim_line-height.asp
http://www.highdots.com/css-editor/css_tutorial/text/line-height.html
http://css-discuss.incutio.com/?page=LineHeight
http://www.quackit.com/css/properties/css_line-height.cfm

 Create your own educational wiki!HelpPublic, not yet premium Privacy Policy RSS