line-height - HTML CSS CSS Property

HTML CSS examples for CSS Property:line-height

  1. HOME
  2. HTML CSS
  3. CSS Property
  4. line-height

Description

The line-height CSS property sets the height between lines of text in a block-level element such as a paragraph.

The following table summarizes the line-height Property.

Item Value
Default value: normal
Applies to:All elements
Inherited: Yes
Animatable: Yes.

Syntax

The syntax of the property is as follows: 


line-height:      length | percentage | number | normal | initial | inherit

Property Values

The following table describes the values of this property.

Value Description
normal roughly 1.2, depending on the element's font-family. This is default value.
number A number multiplied with the element's font-size as the line-height.
length A length value in px, pt, cm, em, etc. Negative values for 'line-height' are not allowed.
percentage A percentage as a multiplier.
initialSets this property to its default value.

The example below shows the line-height property.

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html lang="en">
 <head>
  <title>Example of CSS line-height property</title>
  <style type="text/css">
    p {<!--from  w  w w. j  ava  2 s.  c  o  m-->
        line-height: 1.5;
        border: 1px solid #00ff00;
    }
    div {
        line-height: 300%;
        border: 1px solid #ff0000;
    }
</style>
 </head>
 <body>
  <h1>Play with the line-height property value to see how it works.</h1>
  <p>This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. </p>

 </body>
</html>

Related Tutorials