CSS/Properties/line-height

From Web Education Community Group
Jump to: navigation, search

line-height

On a block container element whose content is composed of inline-level elements, 'line-height' specifies the minimal height of line boxes within the element.
On a non-replaced inline element, 'line-height' specifies the height that is used in the calculation of the line box height.

Description

Values normal | <number> | <length> | <percentage> | inherit
Initial value normal
Applies to All elements
Inherited Yes


Values

  • normal


  • <number>
    The used value of the property is this number multiplied by the element's font size. Negative values are illegal.


  • <length>
    The specified length is used in the calculation of the line box height. Negative values are illegal.


  • <percentage>
    The computed value of the property is this percentage multiplied by the element's computed font size.


  • inherit
    Takes the same specified value as the property for the element's parent.


Example

Example A

[style.css]

 p {
   width: 300px;
   border: 1px solid black;
 }
 #two {
   line-height: 200%;
 }

[index.html]

<body>
  <h2>line-height: normal</h2>
  <p>CSS is a Style Sheet Language for formatting the document content
     (written in HTML or other markup language). You might be interested
     by the CSS Working Group wiki too.</p>
  <h2>line-height: 200%</h2>
  <p id="two">CSS is a Style Sheet Language for formatting the document content
     (written in HTML or other markup language). You might be interested 
     by the CSS Working Group wiki too.</p>
</body>

Csslist2 line-height.png

CSS Reference

The CSS specification defines the line-height property in 10.8.1 Leading and half-leading.