line-height

Overview

W3C

Properties

background

background-attachment

The line-height property sets the distance between two adjacent lines' baselines.


                                line-height: normal | <number> | <length> | <percentage> | inherit

Initial:	normal
Applies To:	all elements
Inherited:	yes
Percentages:	refer to the font size of the element itself
Media:	visual

Values
DOM
Example | Values | length
Example | Values | normal
Example | Values | number
Example | Values | percentage
Example | DOM
References


                                line-height: value;


Value:	Description:
inherit	Takes the same computed value as the property for the element's parent
length	Horizontal or vertical measurements: em \| ex \| px \| in \| cm \| mm \| pt \| pc
normal	"Reasonable" value based on the font of the element
number	Number multiplied by the element's font-size
percentage	Percentage multiplied by the element's font-size


                                [window.]document.getElementById("element-id").style.lineHeight = "line-height";

<html>
  <head>
    <title>line-height</title>
  </head>
  <body>
    <a href="/" onmouseover="mouseover1();">em</a>
    <a href="/" onmouseover="mouseover2();">ex</a>
    <a href="/" onmouseover="mouseover3();">px</a>
    <a href="/" onmouseover="mouseover4();">in</a>
    <a href="/" onmouseover="mouseover5();">cm</a>
    <a href="/" onmouseover="mouseover6();">mm</a>
    <a href="/" onmouseover="mouseover7();">pt</a>
    <a href="/" onmouseover="mouseover8();">pc</a><br>
    <a href="/" onmouseover="mouseover9();">normal</a><br>
    <a href="/" onmouseover="mouseover10();">number</a><br>
    <a href="/" onmouseover="mouseover11();">percentage</a>
    <p id="id1">paragraph</p>
  </body>
  <script type="text/javascript">
    function mouseover1() {
      document.getElementById("id1").style.lineHeight = "1em";
    }
    function mouseover2() {
      document.getElementById("id1").style.lineHeight = "2.3ex";
    }
    function mouseover3() {
      document.getElementById("id1").style.lineHeight = "16px";
    }
    function mouseover4() {
      document.getElementById("id1").style.lineHeight = "0.167in";
    }
    function mouseover5() {
      document.getElementById("id1").style.lineHeight = "0.432cm";
    }
    function mouseover6() {
      document.getElementById("id1").style.lineHeight = "4.32mm";
    }
    function mouseover7() {
      document.getElementById("id1").style.lineHeight = "12pt";
    }
    function mouseover8() {
      document.getElementById("id1").style.lineHeight = "1pc";
    }
    function mouseover9() {
      document.getElementById("id1").style.lineHeight = "1";
    }
    function mouseover10() {
      document.getElementById("id1").style.lineHeight = "1";
    }
    function mouseover11() {
      document.getElementById("id1").style.lineHeight = "100%";
    }
    document.getElementById("id1").style.backgroundColor = "yellow";
  </script>
</html>

W3C Cascading Style Sheets, level 1

W3C Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification

CSS

Values

DOM

Example | Values | length

Example | Values | normal

Example | Values | number

Example | Values | percentage

Example | DOM

References