line-height

The line-height CSS 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="200%">percentage</button>
    <p>line-height</p>
</body>
</html>