CSS properties - line-height

revision:


line-height property

- specifies the height of a line. Negative values are not allowed.

CSS syntax : line-height: normal | number | length | initial | inherit;

Property values:

normal : a normal line height. This is defaultt

number : a number that will be multiplied with the current font-size to set the line height

length : A fixed line height in px, pt, cm, etc.

% : a line height in percent of the current font size

initial : sets this property to its default value.

inherit : inherits this property from its parent element.

JavaScript syntax: object.style.lineHeight="3vw"

example: line-height property
This is a paragraph with a standard line-height.
The standard line height in most browsers is about 110% to 120%.

This is a paragraph with the recommended line-height.
The line height is here set to 1.6. This is a unitless value;
meaning that the line height will be relative to the font size.

This is a paragraph with a smaller line-height.
The line height is here set to 80%.

This is a paragraph with a bigger line-height.
The line height is here set to 200%.
code:
                    <div>
                        <div class="a">This is a paragraph with a standard line-height.<br> The standard line height
                        in most browsers is about 110% to 120%.</div><br>
                        <div class="b">This is a paragraph with the recommended line-height.<br> The line height is
                        here set to 1.6. This is a unitless value;<br>
                        meaning that the line height will be relative to the font size.</div><br>
                        <div class="c">This is a paragraph with a smaller line-height.<br> The line height is here 
                        set to 80%.</div><br>
                        <div class="d">This is a paragraph with a bigger line-height.<br>The line height is here 
                        set to 200%.</div>
                    </div>
                    <style>
                        div.a {line-height: normal;}
                        div.b {line-height: 1.6; }
                        div.c {line-height: 80%;}
                        div.d {line-height: 200%;}
                    </style>