line-height

Description
Syntax
Examples
Links

Description

The line-height property for CSS 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

1 · length

2 · normal

3 · number

4 · percentage

5 · JS

<!doctype html>
<html>
<head>
    <style>
        p
        {
            background-color: yellow;
        }
    </style>
</head>
<body>
    <button>initial</button><br>
    <button value="1em">em</button>
    <button value="2.235ex">ex</button>
    <button value="0.1667in">in</button>
    <button value="0.423cm">cm</button>
    <button value="4.23mm">mm</button>
    <button value="1pc">pc</button>
    <button value="12pt">pt</button>
    <button value="16px">px</button><br>
    <button>normal</button>
    <button value="2">number</button>
    <button value="400%">percentage</button>
    <p>line-height</p>
    <script>
        function myfunction(myparameter)
        {
            const mytarget = myparameter.target;
            const myproperty = mytarget.value || mytarget.innerHTML;
            document.querySelector("p").style.lineHeight = myproperty;
        }
        for(const mybutton of document.querySelectorAll("button"))
        {
            mybutton.addEventListener("mouseover", myfunction);
        }
    </script>
</body>
</html>