LINE-HEIGHT

The line-height property specifies the minimal height of line boxes within the element.

SYNTAX

CSS


            line-height: value;

JS


            object.style.lineHeight = "value";

VALUES


            <'line-height'> = normal | <number> | <length> | <percentage> | inherit


            normal

Tells user agents to set the used value to a reasonable value based on the font of the element.


            <number>

An integer or zero or more decimal digits followed by a dot (.) followed by one or more decimal digits. The first character may be preceded by a sign (- or +). The last character may be succeeded by an exponent (e or E) and an integer.


            <length>

Specifies the length using a number followed by a unit of measurement.


            <percentage>

Specifies the percentage using a number followed by a percent sign (%).


            inherit

Specifies the same value as the parent.

INITIAL

normal

EXAMPLES

LENGTH

NORMAL

NUMBER

PERCENTAGE

JS

<!doctype html>
<html>
<head>
    <style>
        p {
            background-color: yellow;
        }
    </style>
    <script>
        function mouseover(value) {
            document.getElementsByTagName("p")[0].style.lineHeight = value;
        }
    </script>
</head>
<body>
    <button onmouseover="mouseover(value)" value="1em">em</button>
    <button onmouseover="mouseover(value)" value="2.3ex">ex</button>
    <button onmouseover="mouseover(value)" value="16px">px</button>
    <button onmouseover="mouseover(value)" value="0.167in">in</button>
    <button onmouseover="mouseover(value)" value="0.432cm">cm</button>
    <button onmouseover="mouseover(value)" value="4.32mm">mm</button>
    <button onmouseover="mouseover(value)" value="12pt">pt</button>
    <button onmouseover="mouseover(value)" value="1pc">pc</button><br>
    <input onmouseover="mouseover(value)" type="button" value="normal">
    <button onmouseover="mouseover(value)" value="2">number</button>
    <button onmouseover="mouseover(value)" value="150%">percentage</button>
    <p>line-height</p>
</body>
</html>